如何使用CSS3實現(xiàn)按鈕懸停閃爍動態(tài)特效
本篇內(nèi)容介紹了“如何使用CSS3實現(xiàn)按鈕懸停閃爍動態(tài)特效”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
專業(yè)成都網(wǎng)站建設(shè)公司，做排名好的好網(wǎng)站，排在同行前面，為您帶來客戶和效益!創(chuàng)新互聯(lián)建站為您提供成都網(wǎng)站建設(shè)，五站合一網(wǎng)站設(shè)計制作，服務(wù)好的網(wǎng)站設(shè)計公司，成都網(wǎng)站設(shè)計、成都網(wǎng)站制作負責任的成都網(wǎng)站制作公司!
我們先來看看效果圖
下面我們來研究一下是怎么實現(xiàn)這個效果的：
首先是HTML部分，定義一個div容器包裹button按鈕，在按鈕中使用標簽對來包含按鈕文本
然后開始定義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;
}
接著制作一閃而過的覆蓋層：
button {
position: relative;
}
button:after {
content: '';
display: block;
position: absolute;
background: white;
width: 50px;
height: 125px;
opacity: 20%;
}
button:after {
transform: rotate(-45deg);
}
button:after {
top: -2px;
left: -1px;
}
最后實現(xiàn)按鈕懸停閃爍動畫特效
button:hover:after {
left: 120%;
}
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按鈕范圍內(nèi)顯示長方形覆蓋層，那么可給button標簽添加一個overflow: hidden;樣式
button {
overflow: hidden;
}
.jpg)
可以看出覆蓋層的位置還有點問題，最終效果中覆蓋層一開始是不顯示的，我們使用top屬性和left屬性來調(diào)整一下
button:after {
top: -36px;
left: -100px;
}.jpg)
OK，大功告成！下面附上完整代碼：
#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);
}
“如何使用CSS3實現(xiàn)按鈕懸停閃爍動態(tài)特效”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
重慶分公司
重慶分公司
