标签：定位 纯css doctype html head -name 动画 direction for
??这类的东西网上一搜就是大把的，看着比较空旷的博客，所以自己也来写一个。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #yin-yang{ position: absolute; margin:auto; top:0; right:0; bottom:0; left:0; /*上面一段代码是垂直居中定位*/ width:192px; height:96px; background-color:white ; border-color: black; border-style: solid; border-width: 2px 2px 98px 2px; border-radius: 100%; animation-name: turn; /*动画名称*/ animation-delay: 1s; /*动画延迟时间*/ animation-direction: normal; /*动画效果有反复交递等*/ animation-duration: 1s; /*动画执行时间*/ animation-timing-function: linear; /*动画执行方法此为匀速方法*/ animation-iteration-count: infinite; /*执行动画的次数此为无限次数*/ } #yin-yang:before{ content:‘‘; position: absolute; top:50%; left:0; width:24px; height:24px; background-color: white; border:36px solid black; border-radius: 100%; } #yin-yang:after{ content:‘‘; position: absolute; top:50%; right: 0; width:24px; height:24px; background-color: black; border:36px solid white; border-radius: 100%; } @keyframes turn{ 0{transform: rotate(0);} 100%{transform: rotate(360deg);} } </style> </head> <body> <div id="yin-yang"></div> </body> </html>
标签：定位 纯css doctype html head -name 动画 direction for
原文地址：http://www.cnblogs.com/yz2017/p/7102509.html
