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的效果的通过设置不同属性的变化掌握好变化时间和延时的时间就可以让动画有先后顺序


Tag: 代码
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码