CSS3中animation實(shí)現(xiàn)流光按鈕效果

發(fā)布時間：2020-12-21 11:37:24 作者：yun_shuo

這篇文章主要介紹了CSS3中animation實(shí)現(xiàn)流光按鈕效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

在學(xué)習(xí)css3的過程中，發(fā)現(xiàn)很多看著炫酷的效果，利用css3的屬性能很簡單的實(shí)現(xiàn)，animation是css3動畫效果中常見的屬性。下面讓我們了解一下如何利用這個屬性做出以下鼠標(biāo)停在按鈕上有流光按鈕效果~

在這里插入圖片描述

在此之前簡單介紹一下animation屬性的用法。
animation：[ animation-name(檢索或設(shè)置對象所應(yīng)用的動畫名稱) ] || [ animation-duration(檢索或設(shè)置對象動畫的持續(xù)時間) ] || [ animation-timing-function(檢索或設(shè)置對象動畫的過渡類型) ] || [ animation-delay(檢索或設(shè)置對象動畫延遲的時間) ] || [ animation-iteration-count(檢索或設(shè)置對象動畫的循環(huán)次數(shù)) ] || [ animation-direction(檢索或設(shè)置對象動畫在循環(huán)中是否反向運(yùn)動) ]
第一步：給div設(shè)置寬高和圓角邊框成一個圓角矩形。
第二步：設(shè)置背景顏色為三種顏色的漸變色（最后一個顏色需要和第一個顏色一樣，這樣流動起來不會有卡顏色的情況），并將背景大小設(shè)為400%，主要代碼如下

background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
    background-size: 400%;

分析：現(xiàn)在背景為三種顏色的漸變大小是div的四倍，所以div只顯示出一個顏色，利用幀動畫效果控制背景的移動，加上animation屬性就可以一直流動了~

在這里插入圖片描述

第三步：利用幀動畫控制背景定位的橫向移動。（@keyframes作用：定義動畫，簡單的動畫可以直接使用關(guān)鍵字from和to，復(fù)雜的利用0%~100%，分段設(shè)置相應(yīng)的動畫效果，即從一種狀態(tài)過渡到另一種狀態(tài)）

@keyframes run{
            100%{
                background-position: 400% 0px;
            }
        }

再利用偽類hover實(shí)現(xiàn)鼠標(biāo)移上去就出現(xiàn)動畫的效果~
偽類主要代碼

@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流光動畫效果就實(shí)現(xiàn)啦

到此這篇關(guān)于CSS3中animation實(shí)現(xiàn)流光按鈕效果的文章就介紹到這了,更多相關(guān)css3 animation 流光按鈕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！