簡要教學
這是一組使用CSS3 animation製作的滑鼠滑過按鈕動畫特效。這組滑鼠滑過按鈕動畫共有13最後效果,均由按鈕的偽元素和CSS3 animation來製作完成。
#看示範#下載外掛程式
# 使用方法
# HTML結構
# 此效果透過超連結來製作按鈕,例如第一種Swipe效果的HTML程式碼為:
<a class="btn-0" href="#">Swipe</a>
## 為了方便,特效中為除了、 、、、以外的所有元素都加入了動畫過渡效果。
html *, html *:before, html *:after { box-sizing: border-box; -webkit-transition: 0.5s; transition: 0.5s; } html i, html em, html b, html strong, html span { -webkit-transition: none; transition: none; }
a { text-decoration: none; line-height: 80px; color: black; } [class^="btn-"] { position: relative; display: block; margin: 20px auto; width: 100%; height: 80px; max-width: 250px; text-transform: uppercase; overflow: hidden; border: 1px solid currentColor; }
.btn-0 { color: #9a3789; } .btn-0:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 80px; background: #520c46; }
.btn-0:hover { color: #e1c4dc; } .btn-0:hover:before { width: 250px; }
.btn-0:active { background: #881474; }
以上是基於CSS3 animation的滑鼠滑過按鈕特效的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!