css3动画强调效果,css3使用animation属性实现炫酷效果

  • Post author:
  • Post category:其他


animation-name 动画名称,可以有多个值,用逗号隔开,表示绑定了多个动画

animation-name属性为动画指定一个名称

animation-name兼容主流的浏览器,不过还是需要加前缀去兼容

animation-name有两个属性值,分别是keyframename和none

Document

}div{width:800px;height:800px;margin:0 auto;

}.container{position:relative;

}.inner, .middle, .outer, .pic{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;

}.inner{background:url(source/circle_inner.png) center no-repeat;animation-name:circle_inner;

}.middle{background:url(source/circle_middle.png) center no-repeat;animation-name:circle_middle;

}.outer{background:url(source/circle_outer.png) center no-repeat;animation-name:circle_outer;

}.pic{background:url(source/pic.png) center no-repeat;

}