纯css3实现旋转的太极图
效果图：
在线演示地址：纯css3实现旋转的太极图
代码如下：
<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<title>css3实现旋转的太极图</title>
<style>
body{margin: 0;padding: 0;}
#container{
position: relative;
width: 500px;height: 250px; background: #fff; border-radius: 100%; margin: 100px auto;
border: 6px solid #000; border-bottom-width: 250px;
animation:animat 6s linear infinite;
}
#container:before,#container:after{
content: '';
position: absolute;
width: 70px;
height: 70px;
border-radius: 100%;
top: 50%;
border: 90px solid;
}
#container:before{
background: #fff;left: 0;border-color: #000;
}
#container:after{
background: #000;right: 0;border-color: #fff;
}
@keyframes animat{
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
没有做浏览器兼容，建议在chrome浏览！
注意：这个效果不是我原创，但是我一个字一个字敲出来的^_^
纯css3实现旋转的太极图的更多相关文章
- CSS3实现旋转的太极图（二）：只用1个DIV
效果预览: PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...
- 纯css3图片旋转展示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
- 纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="x_con ...
- 纯css3实现的圆形旋转分享按钮
之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览 ...
- 一款纯css3实现的发光屏幕旋转特效
今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="s ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- 纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
随机推荐
- word2vec 实践
关于word2vec,这方面无论中英文的参考资料相当的多,英文方面既可以看官方推荐的论文,也可以看gensim作者Radim Řehůřek博士写得一些文章.而中文方面,推荐 @licstar的< ...
- 基于tiny4412原生uboot修改制作SD启动并烧写到emmc
最近入手tiny4412的标准板,底板SDK型号为1506.但是因为友善之臂提供的superboot不能进入boot菜单,此时我就不能通过tftp下载内核和通过nfs挂载根文件系统,于是想自己做个ub ...
- zabbix 微信报警
http://blog.csdn.net/wh211212/article/details/52735236 Zabbix可以通过多种方式把告警信息发送到指定人,常用的有邮件,短信报警方式,但是越来越 ...
- Region Representaion and Description
两类特征 外部特征(external characteristics), 如boundary 内部特征(internal characteristics), 如像素, color, texture. ...
- mxnet的python包导入的前前后后
mxnet底层的代码是cpp写的, 然后在它上面封装提供了R, python, scala和matlab的接口. 我现在只关注python. 如何使用mxnet的python接口? 自然是通过impo ...
- Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]
今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...
- 使用Apache Archiva搭建Maven Repository Server
关于 Maven 私服 的搭建 这里 采用 Apache Archiva 的 Standanlone 模式来安装 1) 首先到archiva主页上下载最新版(Archiva 2.2.1 Standal ...
- Java多线程有哪几种实现方式? Java中的类如何保证线程安全? 请说明ThreadLocal的用法和适用场景
java的同步机制,大概是通过:1.synchronized:2.Object方法中的wait,notify:3.ThreadLocal机制来实现的, 其中synchronized有两种用法:1.对类 ...
- 【USACO 1.2】Palindromic Squares
进制转换,然后判断是否是回文 /******************************************* TASK: palsquare LANG: C++ Created Time: ...
- 如何提高redmine的访问速度
刚开始使用redmine时 方法一: 可以采用nginx+passenger的方式来驱动redmine提升访问速度,但是在新建问题或更新问题时变得非常慢,这是因为在新建问题和更新问题时会发送邮件,而且 ...