欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css怎么让图案上下浮动

程序员文章站 2022-03-14 20:17:38
...

在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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">
</div>

效果图:

css怎么让图案上下浮动

更多编程相关知识,请访问:编程教学!!

以上就是css怎么让图案上下浮动的详细内容,更多请关注其它相关文章!