CSS实现菜单按钮动画的代码示例-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于CSS实现菜单按钮动画的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

要写一个下拉菜单点击按钮菜单入口就是是点击一个图标按钮之前都是随便用个图片代替今天突然想用CSS写个效果主要参考澎湃移动端右上角的按钮

效果：

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: 7px 6px 0 0;
    outline: none;
}
<!--按钮容器 END-->
 
<!--三条横线 通过rotate3d实现旋转 START-->
.burger p {
    width: 30px;
    height: 4px;
    margin-bottom: 6px;
    background-color: rgb(51, 51, 51);
    transform: rotate3d(0, 0, 0, 0);
}
<!--三条横线 END-->
 
.burger.transform p {
    background-color: transparent;
}
 
.burger.transform p:first-of-type {
    top: 10px;
    transform: rotate3d(0, 0, 1, 45deg)
}
 
.burger.transform p:last-of-type {
    bottom: 10px;
    transform: rotate3d(0, 0, 1, -45deg)
}
 
<!--点击后第一个和第三个横线的效果 START-->
.burger.transform p:first-of-type, .burger.transform p:last-of-type {
    transition: transform .4s .3s ease, background-color 250ms ease-in;
    background: #00c1de;
}
<!--点击后第一个和第三个横线的效果 END-->
 
<!--取消点击后恢复动画 START-->
.burger p:first-of-type, .burger p:last-of-type {
    transition: transform .3s ease .0s, background-color 0ms ease-out;
    position: relative;
}
<!--取消点击后恢复动画 END-->