首頁 >web前端 >css教學 >css怎麼讓圖案上下浮動

css怎麼讓圖案上下浮動

青灯夜游
青灯夜游原創
2020-12-23 11:50:087746瀏覽

在css中,可以使用animation屬性和@keyframes規則為img圖片元素設定上下浮動動畫效果來讓圖案上下浮動;動畫的快慢速度可以透過元素高度與animation中的秒數去調整。

css怎麼讓圖案上下浮動

本教學操作環境:Windows7系統、HTML5&&CSS3版本,Dell G3電腦。

推薦:css影片教學

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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" alt="css怎麼讓圖案上下浮動" >
</div>

效果圖:

css怎麼讓圖案上下浮動

#更多程式相關知識,請造訪:程式設計教學! !

以上是css怎麼讓圖案上下浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn