电话
13363039260
CSS实现菜单按钮动画的代码示例
2024-01-17 16:43 小编
HTML
//vue中通过点击事件改变class
<div
class="burger"
style="float:right;"
:class="{'transform':rightTopBtn}"
@click.stop="rightTopBtn=!rightTopBtn"
>
<div></div>
<div></div>
<div></div>
</div>
CSS
<!--按钮容器START-->
.burger{
cursor:pointer;
display:inline-block;
margin:7px6px00;
outline:none;
}
<!--按钮容器END-->
<!--三条横线通过rotate3d实现旋转START-->
.burgerp{
width:30px;
height:4px;
margin-bottom:6px;
background-color:rgb(51,51,51);
transform:rotate3d(0,0,0,0);
}
<!--三条横线END-->
.burger.transformp{
background-color:transparent;
}
.burger.transformp:first-of-type{
top:10px;
transform:rotate3d(0,0,1,45deg)
}
.burger.transformp:last-of-type{
bottom:10px;
transform:rotate3d(0,0,1,-45deg)
}
<!--点击后第一个和第三个横线的效果START-->
.burger.transformp:first-of-type,.burger.transformp:last-of-type{
transition:transform.4s.3sease,background-color250msease-in;
background:#00c1de;
}
<!--点击后第一个和第三个横线的效果END-->
<!--取消点击后恢复动画START-->
.burgerp:first-of-type,.burgerp:last-of-type{
transition:transform.3sease.0s,background-color0msease-out;
position:relative;
}
<!--取消点击后恢复动画END-->
只用transition也是能达到animation的效果的通过设置不同属性的变化掌握好变化时间和延时的时间就可以让动画有先后顺序
猜你喜欢
联络方式：
13363039260
微信二维码 