CSS实现菜单按钮动画的代码示例
时间2024-05-21 08:24:03发布访客分类CSS浏览22
导读： HTML //vue中通过点击事件改变class CSS .burger{ cursor:pointer; display:inline-bl...
HTML
//vue中通过点击事件改变class
CSS
.burger{
cursor:pointer;
display:inline-block;
margin:7px6px00;
outline:none;
}
.burgerp{
width:30px;
height:4px;
margin-bottom:6px;
background-color:rgb(51,51,51);
transform:rotate3d(0,0,0,0);
}
.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)
}
.burger.transformp:first-of-type,.burger.transformp:last-of-type{
transition:transform.4s.3sease,background-color250msease-in;
background:#00c1de;
}
.burgerp:first-of-type,.burgerp:last-of-type{
transition:transform.3sease.0s,background-color0msease-out;
position:relative;
}
只用transition也是能达到animation的效果的通过设置不同属性的变化掌握好变化时间和延时的时间就可以让动画有先后顺序
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS实现菜单按钮动画的代码示例
本文地址： https://pptw.com/jishu/664745.html
