您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)css如何讓圖案上下浮動(dòng),小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
在css中,可以使用animation屬性和@keyframes規(guī)則給img圖片元素設(shè)置上下浮動(dòng)動(dòng)畫效果來(lái)讓圖案上下浮動(dòng);動(dòng)畫的快慢速度可以通過(guò)元素高度與animation中的秒數(shù)去調(diào)整。
css3實(shí)現(xiàn)一個(gè)上下浮動(dòng)的動(dòng)畫效果(animation)
CSS
@keyframes movepoint { 25% { top: 16px } 100%, { top: 50px } } .shade-button-point { display: inline-block; position: absolute; top: 50px; left: 30%; animation: movepoint 2s infinite; -webkit-animation: movepoint 2s infinite; }
HTML
<div style="margin-right:10px;display:inline-block;position:relative"> <button type="button">點(diǎn)我點(diǎn)我快點(diǎn)我</button> <img class="shade-button-point" src="data:image/png;base64,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"> </div>
效果圖:
關(guān)于css如何讓圖案上下浮動(dòng)就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。