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流光影片效果就實作啦，對你有幫助的話點個贊支持下哦~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/237669.html
標籤：其他
上一篇：純前端 - 各種實現進度條