前端開(kāi)發(fā)之網(wǎng)站按鈕交互效果制作

按鈕是可以明確指示交互行為動(dòng)作的組件，簡(jiǎn)單的可以由一塊背景顏色加上邊框和一組字體，且字體的顏色與背景顏色色值不一致。雖然按鈕的設(shè)計(jì)看似簡(jiǎn)單，但是每一個(gè)細(xì)節(jié)都關(guān)聯(lián)著用戶(hù)的使用體驗(yàn)。用戶(hù)在瀏覽網(wǎng)站的時(shí)候，點(diǎn)擊或者鼠標(biāo)指向按鈕時(shí)發(fā)生的某種動(dòng)畫(huà)效果，例如背景顏色的過(guò)渡變化、字體顏色的過(guò)渡變化、增加投影，讓按鈕更具層次感等，這些多彩多樣的動(dòng)畫(huà)效果可以突出強(qiáng)調(diào)重點(diǎn)，聚焦用戶(hù)的視線(xiàn)，用戶(hù)通過(guò)這些簡(jiǎn)單的點(diǎn)擊或指向就能輕松滿(mǎn)足自己的行為需求。按鈕的交互樣式多種多樣，如下兩種所示：

Css做的光影按鈕，css實(shí)現(xiàn)的光影自動(dòng)且重復(fù)的劃過(guò)按鈕的動(dòng)畫(huà)效果，用linear-gradient() 函數(shù)創(chuàng)建一個(gè)表示三種顏色的線(xiàn)性漸變，設(shè)置animation動(dòng)畫(huà)的名稱(chēng)、時(shí)間、速度曲線(xiàn)、延遲時(shí)間等，然后將div.shadow元素與animation綁定，用@keyframes創(chuàng)建動(dòng)畫(huà)，用百分比來(lái)設(shè)置動(dòng)畫(huà)改變發(fā)生的時(shí)間，通過(guò)逐步改變從一個(gè)X軸背景位置設(shè)定到另一個(gè)X軸背景位置，0%是開(kāi)頭的動(dòng)畫(huà)，100%是動(dòng)畫(huà)完成的時(shí)候。按鈕效果如下圖所示：
Html:
<div class="shadow">learn more</div>

Css:

鼠標(biāo)指向按鈕時(shí)發(fā)生的動(dòng)畫(huà)效果，當(dāng)鼠標(biāo)指向按鈕時(shí)，按鈕四周有線(xiàn)條聚集，可以使用戶(hù)更加容易把視線(xiàn)聚焦到按鈕上，當(dāng)鼠標(biāo)移開(kāi)時(shí)，按鈕四周的線(xiàn)擴(kuò)散消失。按鈕效果如下所示：
Html:
<a class="btndiv">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
learn more
</a>

新聞名稱(chēng)：前端開(kāi)發(fā)之網(wǎng)站按鈕交互效果制作
網(wǎng)頁(yè)網(wǎng)址：http://www.muchs.cn/news11/245111.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷(xiāo)、建站公司、品牌網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、App設(shè)計(jì)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)