站長資訊網(wǎng)在之前的文章《純CSS3怎么創(chuàng)建瀑布流布局？columns方法淺析》中，我們介紹了使用CSS3 column系列屬性創(chuàng)建瀑布流布局的方法，感興趣的朋友可以去了解一下~
而今天我們來看看使用CSS3怎么給按鈕添加動態(tài)效果，實現(xiàn)一個按鈕懸停閃亮陰影動畫效果，讓網(wǎng)頁互動性更強，更吸引人！
我們先來看看效果圖
下面我們來研究一下是怎么實現(xiàn)這個效果的：
首先是HTML部分，定義一個div容器包裹button按鈕，在按鈕中使用<span>標(biāo)簽對來包含按鈕文本
<div id="shiny-shadow"> <button><span>鼠標(biāo)懸停</span></button> </div>
然后開始定義css樣式來進行修飾：調(diào)整布局樣式、色彩范圍
#shiny-shadow { display: flex; align-items: center; justify-content: center; height: 100vh; background: #1c2541; } button { border: 2px solid white; background: transparent; text-transform: uppercase; color: white; padding: 15px 50px; outline: none; } span { z-index: 20; }
接著制作一閃而過的覆蓋層：
-
使用
:after選擇器制作一個帶透明度的長方形，讓它相對于button按鈕進行絕對定位
button { position: relative; } button:after { content: ''; display: block; position: absolute; background: white; width: 50px; height: 125px; opacity: 20%; }
-
在最終效果中，一閃而過的是一個傾斜的長方形；因此我們添加一個
transform: rotate(-45deg);樣式
button:after { transform: rotate(-45deg); }
-
使用top屬性和left屬性控制長方形的位置
button:after { top: -2px; left: -1px; }
最后實現(xiàn)按鈕懸停閃爍動畫特效
-
因為是懸停效果，所以要使用到
:hover選擇器；我們要設(shè)置鼠標(biāo)懸停時長方形的位置
button:hover:after { left: 120%; }
-
這樣突然變換位置不是我們要的效果，可以使用
transition屬性添加一個過渡效果，因為該屬性是css3的一個新屬性，要添加前綴來兼容其他瀏覽器
button:hover:after { left: 120%; transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1); -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1); }
-
大致實現(xiàn)了，再修飾一下。
只想要button按鈕范圍內(nèi)顯示長方形覆蓋層，那么可給button標(biāo)簽添加一個overflow: hidden;樣式
button { overflow: hidden; }
可以看出覆蓋層的位置還有點問題，最終效果中覆蓋層一開始是不顯示的，我們使用top屬性和left屬性來調(diào)整一下
button:after { top: -36px; left: -100px; }
OK，大功告成！下面附上完整代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #shiny-shadow { display: flex; align-items: center; justify-content: center; height: 100vh; background: #1c2541; } button { border: 2px solid white; background: transparent; text-transform: uppercase; color: white; padding: 15px 50px; outline: none; position: relative; overflow: hidden; } span { z-index: 20; } button:after { content: ''; display: block; position: absolute; background: white; width: 50px; height: 125px; opacity: 20%; transform: rotate(-45deg); top: -36px; left: -100px; } button:hover:after { left: 120%; transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1); -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1); } </style> </head> <body> <div id="shiny-shadow"> <button><span>鼠標(biāo)懸停</span></button> </div> </body> </html>
PHP中文網(wǎng)平臺有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》！
