您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關css如何讓圖案上下浮動,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
在css中,可以使用animation屬性和@keyframes規則給img圖片元素設置上下浮動動畫效果來讓圖案上下浮動;動畫的快慢速度可以通過元素高度與animation中的秒數去調整。
css3實現一個上下浮動的動畫效果(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">點我點我快點我</button> <img class="shade-button-point" src="data:image/png;base64,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"> </div>
效果圖:
關于css如何讓圖案上下浮動就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。