CSS实现菜单按钮动画
时间：2023-04-02 11:46:01
HTML
要编写下拉菜单，请单击按钮。菜单项是点击一个图标按钮。在单击之前，它会被替换为图片。今天突然想用CSS写一个效果。主要参考的是澎湃移动端右上角的按钮效果：HTML//Vue通过点击事件改变class
CSS.burger{cursor:pointer;显示：内联块；边距：7px6px00；大纲：无；}.burgerdiv{width:30px;高度：4px；底部边距：6px；背景色：rgb(51,51,51)；变换：rotate3d(0,0,0,0);}.burger.transformdiv{background-color:transparent;}.burger.transformdiv:first-of-type{top:10px;变换：旋转3d(0,0,1,45deg)}.burger.transformdiv:last-of-type{bottom:10px;transform:rotate3d(0,0,1,-45deg)}.burger.transformdiv:first-of-type,.burger.transformdiv:last-of-type{transition:transform.4s.3sease,background-color250msease-in;背景：#00c1de；}.burgerdiv:first-of-type,.burgerdiv:last-of-type{transition:transform.3sease.0s,background-color0msease-out;位置：相对；}只有transition也能达到动画的效果通过设置不同属性的变化，掌握变化时间和延迟时间，可以实现动画的顺序化
