css3动画的使用图片上下循环跳动

标签：center   循环   alt   动画的使用   mat   infinite   color   text   inf   

animation动画使用

图片上下循环跳转
html代码：

<div class="siteicon">
		<img src="./siteicon.png" alt="">
		<p>点击跳转</p>
	</div>

css代码：

@keyframes icon{
	0%{
    opacity: 0.8;
		transform: translate(0,0);
	}
	50%{
    opacity: 1;
		transform: translate(5px,15px);
	}
	100%{
    opacity: 0.8;
		transform: translate(0,0);
	}
}
.siteicon{
	width: 200px;
	height: 200px;
	text-align: center;
	margin: 200px auto;
	animation:  icon 3s linear infinite;
}
p{
	color: #f9743a;
}

css3动画的使用图片上下循环跳动

标签：center   循环   alt   动画的使用   mat   infinite   color   text   inf   

原文地址：https://www.cnblogs.com/my466879168/p/13263577.html