CSS按鈕動畫(四)
阿新 • • 發佈：2021-01-25
在前端的開發中，我們都會用到很多種動畫，按鈕動畫就是最基礎和最簡單的一種了。
例如像下面這種按鈕的動畫效果該怎麼實現呢？
簡單分析一下，無非就是，滑鼠移入和移出的時候，改變下白色的一個“遮罩”的寬度和透明度的問題，起始位置在按鈕的最左邊
廢話就不多說，咱們直接上程式碼，幹就完了！！！
- html程式碼
<body> <div class="abc"> <div> <button class="btn btn-1 btn-1c">hello world</button> </div> </div> </body>
- css樣式程式碼
.btn-1c {
text-transform: uppercase;
}
.btn-1c::after {
width: 0%;
height: 100%;
top: 0;
left: 0;
background: #fff;
}
.btn-1c:hover::after {
width: 100%;
}其他樣式(class="btn btn-1")就不再贅述了，參考
是不是非常的簡單，毫無技術難度，非常人性化，哈哈