CSS3中animation實現流光按鈕效果
我要評論在學習css3的過程中，發現很多看著炫酷的效果，利用css3的屬性能很簡單的實現，animation是css3動畫效果中常見的屬性。下面讓我們了解一下如何利用這個屬性做出以下鼠標停在按鈕上有流光按鈕效果~
在此之前簡單介紹一下animation屬性的用法。
animation：[ animation-name(檢索或設置對象所應用的動畫名稱) ] || [ animation-duration(檢索或設置對象動畫的持續時間) ] || [ animation-timing-function(檢索或設置對象動畫的過渡類型) ] || [ animation-delay(檢索或設置對象動畫延遲的時間) ] || [ animation-iteration-count(檢索或設置對象動畫的循環次數) ] || [ animation-direction(檢索或設置對象動畫在循環中是否反向運動) ]
第一步：給div設置寬高和圓角邊框成一個圓角矩形。
第二步：設置背景顏色為三種顏色的漸變色（最后一個顏色需要和第一個顏色一樣，這樣流動起來不會有卡顏色的情況），并將背景大小設為400%，主要代碼如下
background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
background-size: 400%;
分析：現在背景為三種顏色的漸變大小是div的四倍，所以div只顯示出一個顏色，利用幀動畫效果控制背景的移動，加上animation屬性就可以一直流動了~
第三步：利用幀動畫控制背景定位的橫向移動。（@keyframes作用：定義動畫，簡單的動畫可以直接使用關鍵字from和to，復雜的利用0%~100%，分段設置相應的動畫效果，即從一種狀態過渡到另一種狀態）
@keyframes run{
100%{
background-position: 400% 0px;
}
}
再利用偽類hover實現鼠標移上去就出現動畫的效果~
偽類主要代碼
@keyframes run{
100%{
background-position: 400% 0px;
}
}
.div2:hover{
animation: run 4s linear 0s infinite;
}
案例完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div2{
position:absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
width: 300px;
height: 100px;
border-radius: 50px;
text-align: center;
background-color:aqua;
line-height: 100px;
background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
background-size: 400%;
}
@keyframes run{
100%{
background-position: 400% 0px;
}
}
.div2:hover{
animation: run 4s linear 0s infinite;
}
</style>
</head>
<body>
<div class="div2">
Let's Go
</div>
</body>
</html>
簡單的css3流光動畫效果就實現啦
到此這篇關于CSS3中animation實現流光按鈕效果的文章就介紹到這了,更多相關css3 animation 流光按鈕內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
CSS3動畫之利用requestAnimationFrame觸發重新播放功能
這篇文章主要介紹了利用requestAnimationFrame重新播放(觸發)CSS3動畫,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-11
本文通過實例代碼給大家介紹了CSS3 animation – steps 函數，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-30
這篇文章主要介紹了css中用animation的steps屬性制作幀動畫，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-25
本篇介紹的animation屬性和傳統的動畫制作一樣，能控制幀的每一步，制作出更強大的動畫效果。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看2018-12-25
這篇文章主要介紹了css3的動畫特效之動畫序列（animation） 的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-22- 這篇文章主要為大家詳細介紹了CSS3中Animation動畫屬性用法，教大家如何使用animation動畫，感興趣的小伙伴們可以參考一下2016-07-04
最新評論