纯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 ...
随机推荐
- The Lifecycle and Cascade of WeChat Social Messaging Groups-www2016-20160512
分析性论文: 分析并预测微信群的生命周期,以及群成员的邀请模式. 参考资料:http://www.360doc.com/content/16/0423/11/26166517_553076725.sh ...
- SpringMVC学习--拦截器
简介 Spring Web MVC 的处理器拦截器类似于Servlet 开发中的过滤器Filter,用于对处理器进行预处理和后处理. 拦截器定义 定义拦截器,实现HandlerInterceptor接 ...
- Django- 分页
1. 防止 翻页直接输入值错误导致翻页出现问题 应该捕获输入的值,如果有异常 跳转会第一页 try: page = int(传递过来的值) if(page <0): page=1 except ...
- 【BZOJ 3879】SvT
http://www.lydsy.com/JudgeOnline/problem.php?id=3879 SvT的中文是后缀虚树? 反正本蒟蒻不懂,还是$O(nlogn)$的后缀数组和单调栈维护来做, ...
- JavaScript写一个连连看的游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...
- js-jquery-将table的td转化成可编辑的文本
1.使用插件mindmup-editabletable.js $('#table').editableTableWidget({editor: $('<textarea>')}); 2.j ...
- 数据库开发基础-SQl Server 视图
1.视图的概述 视图其实就是一条查询sql语句,用于显示一个或多个表或其他视图中的相关数据.视图将一个查询的结果作为一个表来使用,因此视图可以被看作是存储的查询或一个虚拟表.视图 ...
- 【USACO 2.2】Party Lamps
四种开关,n盏灯,1:改变所有灯状态,2:改变奇数灯状态,3:改变偶数灯状态,4:改变3k+1灯状态 给你按开关的总次数c和部分灯限制条件(开或关),一开始都是开着的.($c \leq 10000,n ...
- Redis 数据类型-List
lpush/rpush/lrange 127.0.0.1:6379> LPUSH list01 1 2 3 4 5 (integer) 5 127.0.0.1:6379> LRANGE l ...
- 【bzoj2104】 K-th Number
http://poj.org/problem?id=2104 (题目链接) 题意 求区间第k大数. Solution1 主席树裸题. 主席树当时我学是学的要死,那个时候不晓得百度出什么bug了,搜个主 ...