css画八卦图
2016-03-15 13:20
567 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .yin-yang1 { width: 200px; height: 200px; background: black; border-radius: 50%; border: 1px solid black; position: relative; animation: spin 1s linear infinite; /*动画设置*/ } @keyframes spin { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } .yin-yang2 { width: 200px; height: 100px; background: white; border-radius: 100px 100px 0 0; position: absolute; z-index: 5; } .yin-yang3 { width: 100px; height: 100px; background: white; position: absolute; z-index: 6; top:50px; border-radius: 50%; } .yin-yang4{ width: 100px; height: 100px; background: black; position: absolute; top:50px; left:100px; z-index: 7; border-radius: 50%; } .yin-yang5{ width: 30px; height: 30px; background: black; position: absolute; top:85px; left:35px; z-index: 8; border-radius: 50%; } .yin-yang6{ width: 30px; height:30px; background: white; position: absolute; top:85px; left:135px; z-index: 9; border-radius: 50%; } </style> </head> <body> <div class="yin-yang1"> <div class="yin-yang2"></div> <div class="yin-yang3"></div> <div class="yin-yang4"></div> <div class="yin-yang5"></div> <div class="yin-yang6"></div> </div> </body> </html>
如图
加上一个 旋转动画,
相关文章推荐
- CSS实现DIV水平 垂直居中-1
- 【CSS疑难杂症】z-index 层级树
- css3做各种角度三角形
- 翻翻git之---RecycleView的上拉,下拉刷新,样式切换,添加foot和header的强大库 RecyclerViewManager
- 翻翻git之---RecycleView的上拉,下拉刷新,样式切换,添加foot和header的强大库 RecyclerViewManager
- html/css 编码规范
- [转][译]关于CSS中的float和position和z-index
- 【html和css入门】实现简单的页首导航
- CSS3新属性之user-select控制文本是否选中
- CSS3滚动条-webkit-scrollbar
- CSS选择器
- 第六届蓝桥杯-手链样式
- CSS这些代码你都不会,你还有什么好说的!!!
- 针对IE7.8.9界面样式整体居左的问题解决方案
- 学习DIV+CSS网页布局之混合布局
- 学习DIV+CSS网页布局之三列布局
- 学习DIV+CSS网页布局之两列布局
- 学习DIV+CSS网页布局之一列布局
- box-sizing:border-box设置并排带边框的容器
- 项目问题反思——CSS优先级