纯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 ...
随机推荐
- CSS 栅格布局
bootstrap3.0教程之栅格系统原理(布局) http://www.jb51.net/css/152846.html [div+css]栅格化布局样式备用坑 http://www.0773lin ...
- Windows10易升下载
为了更好的帮助用户快速跨版本升级windows,退出Windows易升!在线下载,更新安装!网速快的话需要半个小时搞定! 升级完毕,如股票感觉OK.记得清理C盘Windows.old文件 01.磁盘- ...
- Linux版本‘’大‘’全|形而上学
1.Oracle Linux(下载地址) 清单: (1)Oracle Linux Release 7 for x86_64 (64 Bit) 2.debian(下载地址) 清单: (1)debian- ...
- 工作框架各种使用整理---使用Cache
<service verb="get" noun="Products"> <implements service="sang.pro ...
- 消息队列写入内容后，读出来的自动包裹了<string>标签，自定义格式化器解决该issue
/// <summary> /// 该格式化器使输入即输出 /// </summary> public class StringFormatter : IMessageForm ...
- hibernate的Criteria条件查询
项目中用到了criteria的查询方式,觉得挺好用的,下班后找了一下资料,一边测试,一边在博客上面记录下来 1.初解 快速浏览了资料,大致了解了以下的内容: 1. Hibernate 定义了Crite ...
- Mysql存储引擎之TokuDB以及它的数据结构Fractal tree(分形树)
在目前的Mysql数据库中,使用最广泛的是innodb存储引擎.innodb确实是个很不错的存储引擎,就连高性能Mysql里都说了,如果不是有什么很特别的要求,innodb就是最好的选择.当然,这偏文 ...
- 详解Mac配置虚拟环境Virtualenv
virtualenv 可以用来建立一个专属于项目的python环境,保持一个干净的环境.只需要通过命令创建一个虚拟环境,不用的时候通过命令退出,删除. 下面介绍一下安装方法: 安装 virtualen ...
- apache ab压力测试
今天提到压力测试,想起以前看到的ab,于是又重新查找了下资料,并记录了下. ab命令会创建很多的并发访问线程,模拟多个访问者同时对某一URL地址进行访问. 它的测试目标是基于URL的,因此,既可以用来 ...
- js日历表
$scope.getCurrentWeek = function (day) { var days = ["星期日", "星期一", "星期二&quo ...