@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3动画实例</title>
<style>
div
{
width:100px
height:100px
background:red
position:relative
animation:myfirst 5s
-webkit-animation:myfirst 5s/* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:redleft:0pxtop:0px}
25% {background:yellowleft:200pxtop:0px}
50% {background:blueleft:200pxtop:200px}
75% {background:greenleft:0pxtop:200px}
100% {background:redleft:0pxtop:0px}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:redleft:0pxtop:0px}
25% {background:yellowleft:200pxtop:0px}
50% {background:blueleft:200pxtop:200px}
75% {background:greenleft:0pxtop:200px}
100% {background:redleft:0pxtop:0px}
}
</style>
</head>
<body>
<p><b>注意:</b>该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。
2、然后写html结构，只需要一个div元素即可，class名字叫做img
3、设置其边框为不同的颜色，边框宽度设置成100px。
4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。
5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码
6、来看一下最后的效果，还是不错的。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）