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

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;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值