CSS3实现阴阳鱼
2016-09-29 14:27
316 查看
直接上代码:
来源:http://codepen.io/sfi0zy/pen/ALrAvd
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>阴阳鱼</title> <style> body { background: #F0DFAD; } .yin-yang { position: fixed; top: 50%; left: 50%; margin: -5rem 0 0 -5rem; height: 10rem; width: 10rem; border-radius: 50%; background: -webkit-linear-gradient(top, #fff 0%, #fff 50%, #000 50%, #000 100%); background: linear-gradient(to bottom, #fff 0%, #fff 50%, #000 50%, #000 100%); box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4); -webkit-animation: rotate 10s linear infinite; animation: rotate 10s linear infinite; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .yin-yang:before, .yin-yang:after { content: ''; box-sizing: border-box; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 50%; width: 50%; border-radius: 50%; } .yin-yang:before { left: 0; background: #FFF; border: 2rem solid #000; } .yin-yang:after { right: 0; background: #000; border: 2rem solid #fff; } </style> </head> <body> <div class="yin-yang"></div> </body> </html>
来源:http://codepen.io/sfi0zy/pen/ALrAvd
相关文章推荐
- 5个CSS3技术 实现设计增强
- 用 CSS3 实现未来的 Web
- CSS3实例:border-radius圆角的优雅实现
- 使用CSS3 @font-face实现个性化字体
- 用纯CSS3实现QQ LOGO
- 用CSS3实现浏览器的缩放功能
- 利用CSS3特性巧妙实现漂亮的DIV箭头
- 绚丽的按钮导航(css3)实现
- 利用CSS3的checked伪类实现OL的隐藏显示的方法
- 用 CSS3 实现未来的 Web
- 用css3实现一个苹果风格的导航菜单
- CSS3实现美妙的图片悬停特效
- 11个非常棒的CSS3实现的图片画廊
- 纯 CSS3 实现的 Twitter 图画
- 用CSS3实现未来的Web
- CSS3 完美实现圆角效果
- 利用CSS3的新功能实现(椭)圆角边框和图片边框 (圆角)
- 利用CSS3特性巧妙实现漂亮的DIV箭头
- 用CSS3实现浏览器的缩放功能
- 用纯CSS3实现QQ LOGO