【每日一练】86—一个动画菜单效果的实现果
今天练习的这个效果，也是非常常见的一个效果，你也会在很多产品中看到它，算是一个比较实用型的小练习，现在，我们一起来看一下它的最终
效果：
看完了这个最终效果，我们再来看一下，它的代码实现过程。
HTML代码：
<html>
<head>
<title>【每日一练】86—一个动画菜单效果的实现</title>
<!--ICON文件引入-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js">
</script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js">
</script>
<!--CSS文件引入-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navigation">
<div class="menuToggle"></div>
<div class="menu">
<ul>
<li style="--i:0.1s;"><a href="https://www.webqdkf.com/"><ion-icon name="camera-outline"></ion-icon></a></li>
<li style="--i:0.2s;"><a href="https://www.webqdkf.com/"><ion-icon name="settings-outline"></ion-icon></a></li>
<li style="--i:0.3s;"><a href="https://www.webqdkf.com/"><ion-icon name="trash-outline"></ion-icon></a></li>
</ul>
</div>
</div>
<script>
let menuToggle = document.querySelector('.menuToggle');
menuToggle.onclick = function(){
menuToggle.classList.toggle('active')
}
</script>
</body>
</html>
CSS代码：
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(45deg,#ff216d,#2196f3);
}
.navigation
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.menuToggle
{
position: relative;
width: 70px;
height: 70px;
background: #fff;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}
.menuToggle::before
{
content: '+';
position: absolute;
font-size: 3em;
font-weight: 200;
color: #e91e63;
transition: 1.5s;
}
.menuToggle.active::before
{
transform: rotate(225deg);
}
.menu
{
position: absolute;
width: 30px;
height: 30px;
background: #fff;
border-radius: 70px;
z-index: -1;
transition: transform 0.5s, width 0.5s, height 0.5s;
transition-delay: 1s, 0.5s, 0.5s;
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.menuToggle.active ~ .menu
{
transform: translateY(-100px);
height: 70px;
width: 240px;
z-index: 1;
transition-delay: 0s, 0.5s, 0.5s;
box-shadow: 0 15px 25px rgba(0,0,0,0.1);
}
.menuToggle ~ .menu::before
{
content: '';
position: absolute;
left: calc(50% - 8px);
bottom: 4px;
width: 16px;
height: 16px;
transform: rotate(45deg);
background: #fff;
border-radius: 2px;
transition: 0.5s;
}
.menuToggle.active ~ .menu::before
{
transition-delay: 0.5s;
bottom: -6px;
}
.menu ul
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
gap: 40px;
z-index: 10;
}
.menu ul li
{
list-style: none;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(-30px);
transition: 0.25s;
transition-delay: 0s;
transition-delay: calc(0s + var(--i));
}
.menuToggle.active ~ .menu ul li
{
visibility: visible;
opacity: 1;
transform: translateY(0px);
transition-delay: calc(0.75s + var(--i));
}
.menu ul li a
{
display: block;
font-size: 2em;
text-decoration: none;
color: #555;
}
.menu ul li:hover a
{
color: #e91e63;
}
写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号
评论