如何使用CSS實現(xiàn)菜單按鈕動畫

這篇文章主要為大家展示了如何使用CSS實現(xiàn)菜單按鈕動畫，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“如何使用CSS實現(xiàn)菜單按鈕動畫”這篇文章吧。

　　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實現(xiàn)旋轉(zhuǎn)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的效果的通過設(shè)置不同屬性的變化掌握好變化時間和延時的時間就可以讓動畫有先后順序

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

以上就是關(guān)于“如何使用CSS實現(xiàn)菜單按鈕動畫”的內(nèi)容，如果該文章對您有所幫助并覺得寫得不錯，勞請分享給您的好友一起學習新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注億速云行業(yè)資訊頻道。