首页 > 代码库 > 转动的八卦图纯css实现
转动的八卦图纯css实现
??这类的东西网上一搜就是大把的,看着比较空旷的博客,所以自己也来写一个。
<!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实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。