介绍//vue中通过点击事件改变
& lt; div
类=癰urger"
风格=案《?正确的;“
:类=皗& # 39;变换# 39;:rightTopBtn}“;
@click.stop=皉ightTopBtn=! rightTopBtn"
比;
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt;/div> CSS & lt; !——按钮容器开始——比;
.burger {
光标:指针;
显示:inline-block;
保证金:7 px 6 0 0 px;
大纲:没有;
｝
& lt; !——按钮容器结束——比;
& lt; !——三条横线通过rotate3d实现旋转开始——比;
.burger p {
宽度:30 px;
高度:4 px;
margin-bottom: 6 px;
background - color: rgb(51岁,51岁,51);
变换:rotate3d (0, 0, 0, 0);
｝
& lt; !——三条横线结束——比;
.burger。变换p {
背景颜色:透明;
｝
.burger。变换p: first-of-type {
上图:10 px;
变换:rotate3d(0, 0, 1, 45度)
｝
.burger。变换p: last-of-type {
底部:10 px;
变换:rotate3d(0, 0, 1, -45度)
｝
& lt; !——点击后第一个和第三个横线的效果开始——比;
.burger。变换p: first-of-type .burger。变换p: last-of-type {
background - color转型:变换。4。3,250在女士;
背景:# 00 c1de;
｝
& lt; !——点击后第一个和第三个横线的效果结束——比;
& lt; !——取消点击后恢复动画开始——比;
.burger p: first-of-type .burger p: last-of-type {
background - color转型:变换。3缓解0,0 ms打发走;
位置:相对;
｝
& lt; !——取消点击后恢复动画结束——在
小编给大家分享一下CSS实现菜单按钮动画的案例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
要写一个下拉菜单点击按钮菜单入口就是是点击一个图标按钮之前都是随便用个图片代替今天突然想用CSS写个效果主要参考澎湃移动端右上角的按钮
效果:
HTML
只用过渡也是能达到动画的效果的通过设置不同属性的变化掌握好变化时间和延时的时间就可以让动画有先后顺序
以上是CSS实现菜单按钮动画的案例的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
