在之前的文章《純CSS3怎麼創建瀑布流佈局？ columns方法淺析》中，我們介紹了使用CSS3 column系列屬性創建瀑布流佈局的方法，感興趣的朋友可以去了解一下~
而今天我們來看看使用CSS3怎麼給按鈕加入動態效果，實現一個按鈕懸停閃亮陰影動畫效果，讓網頁互動性更強，更吸引人！
我們先來看看效果圖
下面我們來研究一下是怎麼實現這個效果的：
首先是HTML部分，定義一個div容器包裹button按鈕，在按鈕中使用標籤對來包含按鈕文字
<div id="shiny-shadow">
<button><span>鼠标悬停</span></button>
</div>
登入後複製
##然後開始定義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;
}
span {
z-index: 20;
}登入後複製
接著製作一閃而過的覆蓋層：
- 使用
:after選擇器製作一個具有透明度的長方形，讓它相對於button按鈕進行絕對定位
button {
position: relative;
}
button:after {
content: '';
display: block;
position: absolute;
background: white;
width: 50px;
height: 125px;
opacity: 20%;
}登入後複製
##
button:after {
top: -2px;
left: -1px;
}登入後複製
最後實作按鈕懸停閃爍動畫特效
因為是懸停效果，所以要使用到
:hover
選擇器；我們要設定滑鼠停留時長方形的位置
#
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);
}登入後複製
###################大致實作了，再修飾一下。 ############只想要button按鈕範圍內顯示長方形覆蓋層，那麼可為button標籤新增一個###overflow: hidden;###樣式###
button {
overflow: hidden;
}登入後複製
##### #################可以看出覆蓋層的位置還有一點問題，最終效果中覆蓋層一開始是不顯示的，我們使用top屬性和left屬性來調整一下###
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>鼠标悬停</span></button>
</div>
</body>
</html>登入後複製
###PHP中文網路平台有非常多的影片教學資源，歡迎大家學習《###css影片教學###》！ ###
以上是手把手教你使用CSS3實作按鈕懸停閃爍動態特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！
