推荐下载
-
2020-05-12 浏览：738
-
2020-05-06 浏览：520
-
2020-05-08 浏览：509
-
2020-04-04 浏览：502
-
2020-05-12 浏览：497
css3使用animation属性实现炫酷效果
发布时间:2021-06-09animation-name 动画名称，可以有多个值，用逗号隔开，表示绑定了多个动画
animation-name兼容主流的浏览器，不过还是需要加前缀去兼容
animation-name有两个属性值，分别是keyframename和none
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin:0 auto; background:#abcdef; } 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; } </style> </head> <body> <div class="container"> <div class="inner"></div> <div class="middle"></div> <div class="outer"></div> <div class="pic"></div> </div> </body> </html>