纯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 ...
随机推荐
- AngularJS引入Echarts的Demo
最近要用到图表展示,想了想,还是首选Echarts,HighCharts和D3.js备用吧, 而项目中也用到了AngularJS,所以需要把Echarts引入到AngularJs中一起使用, 试了试, ...
- JAVA内嵌数据库H2的使用入门
H2数据库是开源的,非常适合做嵌入式数据库使用,尤其用java编码的时候. H2的优势: 1.h2采用纯Java编写,因此不受平台的限制. 2.h2只有一个jar文件,十分适合作为嵌入式数据库试用. ...
- 1109关于redo_Log和undo_log和BIN-LOG
转自http://www.cnblogs.com/Bozh/archive/2013/03/18/2966494.html 三者之间的区别BIN-LOG 一个对应BINLOG文件REDO-LOG 对应 ...
- Eclipse导入 appcompat，design兼容包
从Android studio推出1.0正式版后,就一直在as上开发项目,但是最近要测试一个项目,是eclipse结构,导入as后,是各种报错信息,决定改成eclipse. 其中项目中用到了ppcom ...
- mycat 9066管理端口 常用命令
1.连接mycat 9066管理端口 命令:mysql -uroot -proot -P9066 -h127.0.0.1 -u:用户名 -p:密码 -P:端口 -h:ip地址例:linux路径切换到m ...
- 【POJ 3294】Life Forms 不小于k个字符串中的最长子串
一下午和一晚上都在刚这道题,各种错误都集齐了so sad 我的时间啊!!! 后缀数组就先做到这里吧,是在伤不起啊QAQ 出现了各种奇怪的错误,看了标算,然后乱改自己的代码,莫名其妙的改A了,后来发现用 ...
- CDN 备胎技巧
如果你使用 CDN 服务,建议准备一个备胎,万一 CDN 服务挂了,可以从自己的服务器上读取: <script src="http://cdn.staticfile.org/jquer ...
- java-首字母大小写
/** * 首字母小写 * * @param str * @return */ public static String toLowerCaseFirstChar(String s) { if (Ch ...
- 【USACO 1.3】Barn Repair
贪心,去掉最大的min(m,c)-1个间隔 /******************************************* TASK: barn1 LANG: C++ Created Tim ...
- body中设置-webkit-scrollbar竖向滚动条，在手机浏览器上无效
暂时无解,如果是chrome的PC模式,滚动条是没有的,但如果是手机模式,滚动条会出现,且无法设置其样式,滚完后会自动消失. 如果设置div这些块元素,完全没问题.