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

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

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

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

在這里插入圖片描述

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

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

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

在這里插入圖片描述

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

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

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

@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>

簡(jiǎn)單的css3流光動(dòng)畫(huà)效果就實(shí)現(xiàn)啦

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