??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

前言

最近看到很多按鈕加邊流動(dòng)效果，今天我們用HarmonyOS來實(shí)現(xiàn)一下。

實(shí)現(xiàn)效果

對(duì)自定義的按鈕添加動(dòng)態(tài)樣式，實(shí)現(xiàn)動(dòng)態(tài)效果，并且通過這種實(shí)現(xiàn)的思路還可以更改div的樣式，來實(shí)現(xiàn)更多的按鈕效果。

實(shí)現(xiàn)原理

在兩個(gè)div中間畫一個(gè)長一點(diǎn)并且矮一點(diǎn)的div并添加旋轉(zhuǎn)和嵌入效果，而且最上面的div要比最下面的div要下一些，這樣就能夠看到中間旋轉(zhuǎn)的div的動(dòng)態(tài)效果。

實(shí)現(xiàn)過程

1、結(jié)構(gòu)

因?yàn)榘粹o不僅有視覺效果，還會(huì)有文字提示，這里用到了自定義標(biāo)簽??text??，當(dāng)然你也可以用其他的標(biāo)簽或者不用標(biāo)簽包裹也行。

1. 首先繪制一個(gè)大致的按鈕框架。

<div class="ad">
    <div>
        <div class="button">
            <div class="rotate"></div>
        </div>
        <div class="inside">
            <text class="word">按鈕</text>
        </div>
    </div>
</div>

2、樣式

首先，要給按鈕一個(gè)基礎(chǔ)樣式，再基礎(chǔ)樣式上添加一個(gè)長方形的div，再讓div進(jìn)行旋轉(zhuǎn)，如下：

.button {
    width: 150px;
    height: 80px;
    background-color: #ef437f;
    position: relative;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 5px;
}

這樣我們就得到了一個(gè)粉色的長方形，然后再對(duì)這個(gè)長方形進(jìn)行一些處理在中間添加一個(gè)稍長的長方形。

.rotate {
    width: 300px;
    height: 60px;
    top:10px;
    background-color: cyan;
    position: absolute;
    animation: rotate 2s infinite;
    position: absolute;
}

再使用蒙版效果讓旋轉(zhuǎn)的div只顯示在里面 ，官方文檔中介紹了overflow的用發(fā)分別是 visible ， hidden ， scroll ，對(duì)應(yīng)的是顯示在div元素外面，顯示在div元素中， 元素內(nèi)容超過元素大小時(shí)，進(jìn)行滾動(dòng) ，咱們只用overflow中的hidden 就行了。

overflow: hidden;

接下來就是讓這個(gè)藍(lán)色的div進(jìn)行旋轉(zhuǎn)就行了， 同樣的官方文檔中也給出了使其旋轉(zhuǎn)的方法，這一處的功能比較多官方給的介紹也很詳細(xì)咱們只介紹用到的方法，在需要選擇的div中添加上animation這個(gè)屬性就行。

animation: rotate 2s infinite

animation此屬性還能控制旋轉(zhuǎn)X,Y 軸 ，速度，次數(shù)功能，rotate， 2s， infinite分別代表著默認(rèn)軸 ，兩秒， 無限次播放 。

然后再添加選擇的度數(shù)就行了，我選擇的是0度到360度這樣旋轉(zhuǎn)一個(gè)圈，然后再進(jìn)行一直重復(fù)就行了。。

@keyframes rotate {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}

接下來要做的就是在粉色的div中再添加一個(gè)小一點(diǎn)的div進(jìn)行遮蓋。

.inside {
    width: 144px;
    height: 74px;
    top: 3px;
    left: 3px;
    background-color: #5a5a5a;
    position: relative;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    overflow: hidden;/*元素內(nèi)容超過元素大小時(shí)，進(jìn)行裁切顯示；*/
}

這樣就可以在按鈕的邊框上呈現(xiàn)出一種流光的效果。

再添加一些細(xì)節(jié)，比如圓角邊框和文字。

再添加一個(gè)點(diǎn)擊時(shí)改變按鈕樣式，這樣一個(gè)流光效果的按鈕就差不多了。

.inside:active {    background-color: #ef437f;/*按鈕被激活時(shí)，背景顏色變?yōu)?ef437f */}

總結(jié)

在這里，我使用了css的特性來實(shí)現(xiàn)這樣的效果，大家還可以想想有沒有其他的情況可以實(shí)現(xiàn)這個(gè)效果，以及將其運(yùn)用到你的項(xiàng)目里。

??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??。