使用CSS3實現(xiàn)按鈕懸停閃爍動態(tài)特效代碼
我要評論我們介紹了使用CSS3 column系列屬性創(chuàng)建瀑布流布局的方法，感興趣的朋友可以去了解一下~
我們先來看看效果圖
下面我們來研究一下是怎么實現(xiàn)這個效果的：
首先是HTML部分，定義一個div容器包裹button按鈕，在按鈕中使用標簽對來包含按鈕文本
<div id="shiny-shadow"> <button><span>鼠標懸停</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選擇器；我們要設置鼠標懸停時長方形的位置
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標簽添加一個overflow: hidden;樣式
button {
overflow: hidden;
}
可以看出覆蓋層的位置還有點問題，最終效果中覆蓋層一開始是不顯示的，我們使用top屬性和left屬性來調(diào)整一下
button:after {
top: -36px;
left: -100px;
}
以上就是使用CSS3實現(xiàn)按鈕懸停閃爍動態(tài)特效的詳細內(nèi)容。
到此這篇關(guān)于使用CSS3實現(xiàn)按鈕懸停閃爍動態(tài)特效的文章就介紹到這了,更多相關(guān)CSS3按鈕懸停閃爍動態(tài)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了css3 實現(xiàn)文字閃爍效果的三種方式示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編2021-04-25- 這篇文章主要為大家介紹了CSS3實現(xiàn)閃爍動畫效果的方法,可實現(xiàn)屬性名為className的元素呈現(xiàn)閃爍效果的功能,非常具有實用價值,需要的朋友可以參考下2015-02-09