纯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 ...
随机推荐
- GBPR: Group Preference Based Bayesian Personalized Ranking for One-Class Collaborative Filtering-IJACA 2013_20160421
1.Information publication:IJACA 2013 2.What 基于BPR模型的改进:改变BPR模型中,a,用户对商品喜好偏序对之间相互独立;b,用户之间相互独立的假设 原因: ...
- 最短判断IE的办法
if(!!-[1,]){ return }; 无意中看到这样一行代码,经查是用来判断IE的代码,非常精简,原理如下: [1,],这是一个数组,IE和标准浏览器对这样一个数组的解析是不一样的 alert ...
- AlertDialog之常见对话框（单选对话框、多选对话框、进度条对话框）
单选对话框,顾名思义就是只能选一项(setSingleChoiceItems(Items,)) public void click(View v){ //创建对话框类 AlertDialog.Buil ...
- 【JavaEE企业应用实战学习记录】struts配置文件详细解析
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...
- __getattribute__
class Foo: def __init__(self,x): self.x = x def __getattribute__(self, item): print('不管是否纯在,我都会执行') ...
- struts2 spring3.2 hibernate4.1 框架搭建 整合
ssh是企业开发中常遇到的框架组合,现将框架的搭建过程记录下来,以便以后查看.我的搭建过程是,首先struts,然后spring,最后hibernate.struts2的最新版本为2.3.8,我下载的 ...
- 【HDU 2089】不要62
http://acm.hdu.edu.cn/showproblem.php?pid=2089 数位dp,参照了打野的博客 预处理出f数组,f[i][j]表示第i位为数字j时的可行的数字总数. 对于区间 ...
- AOP 学习笔记
代理是一个设计模式,提供了对目标对象另外的访问方式:即通过代理访问目标对象. 好处:可以在目标对象实现的基础上,增强额外的功能操作. Cglib 代理,也叫作 子类代理. JDK的动态代理有一个限制, ...
- Fiddler环境配置教程
原理:安装Fiddler的电脑和将要进行检测的手机(iPhone.Android)加入同一局域网,这样手机上APP的请求就可以被电脑通过Fiddler抓取到. 局域网布置教程: 在将要布置局域网的电脑 ...
- dede使用方法----如何自定义字段
我们在用dede做东西的时候,有时候需要添加一些dede里面没有的字段,有dede后台里面可以添加相关的自段,下面我就以如何给产品添加一个价格的字段来讲述一下如何给dede添加字段,并且调用它. 1. ...