CSS3 动画@keyframes

最新推荐文章于 2023-11-06 11:31:21 发布

凌冰_

最新推荐文章于 2023-11-06 11:31:21 发布

阅读量575

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/hlx20080808/article/details/69569357

版权

CSS3 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

animation（动画）属性

index.html

<style type="text/css">

div{
	width:100px;
	height:100px;
	margin:30px;
	float: left;
	text-align:center;
	color:white;
	font-weight:bolder;
	line-height:25px;
	
}
div:nth-of-type(1) {
	background:red;
	border-radius:50%; /* 圆*/
	position:relative; /* 相对位置 */
	animation:moves 5s infinite;
}
/*使一个div元素逐渐移动300像素：*/
@keyframes moves{
	from {top:0px;}
	to {top:300px;}
}

div:nth-of-type(2) {
	background:#0C3;
	border-radius:25px; /* 圆角*/
	position:relative; /* 相对位置 */
	animation:my 5s infinite;
}
@keyframes my{
  0%{top:0px; left:0px; background:#000}
  25%{top:100px; right:100px; background:#00F;}	
  50%{top:200px; left:200px; background:#F03;}	
  75%{top:100px; right:100px; background:#306;}	
  100%{top:0px; left:0px; background:#FC6;}	
}
</style>
</head>

<body>
<p>注意: @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器.</p>
<div>上下移动</div>
<p/>
<div>漂移</div>

效果：可以来回的移动