CSS3 animation(动画)学习

avatar
avatar
小王先森
386
文章
383
评论
2020年4月12日 评论 202

熬夜了,真的很累,手臂也很疼啊。这几天在使用PHP开源免费无版权限制的极致CMS重新设计单位的网站,用到了这个CSS3 animation(动画) 属性,所以把它记录下来。

直接上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CCS3 动画学习</title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
	from {left:0px;}
	to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
	from {left:0px;}
	to {left:200px;}
}
</style>
</head>
<body>

<p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p>

<div></div>

</body>
</html>
avatar
  • 本文由 发表于 2020年4月12日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: