css3太极图效果+自动旋转
主要使用border-radius属性实现圆，半圆，定位坐标覆盖部分模块。
半圆：
width: 50%; height: 100%;
border-radius:100% 0 0 100% /50% 0 0 50%;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>太极图</title>
<style type="text/css">
.taiji{position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: #fff;border:solid 1px #ccc; animation: spin 6s linear infinite;/*动画设置*/}
.tj_1{position: absolute; top: 0px; width: 50%; height: 100%;}
.tj_big1{left: 0px; border-radius:100% 0 0 100% /50% 0 0 50%; background: #000;}
.tj_big2{right: 0px; border-radius:0 100% 100% 0 / 0 50% 50% 0; background: #fff;}
.tj_2{position: absolute; width: 50%; height: 50%; left: 25%; border-radius: 50%;}
.tj_s1{bottom: 0px; background: #fff;}
.tj_s2{top: 0px; background: #000;}
.tj_ss{position: absolute; width: 25%; height: 25%; left: 37.5%;border-radius: 50%;}
.tj_w{top:37.5%;background: #000;}
.tj_b{top:37.5%;background: #fff;}
/*动画方法*/
@keyframes spin {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
</style>
</head>
<body> <div class="taiji">
<div class="tj_1 tj_big1"></div>
<div class="tj_1 tj_big2"></div>
<div class="tj_2 tj_s1">
<div class="tj_ss tj_w"></div>
</div>
<div class="tj_2 tj_s2">
<div class="tj_ss tj_b"></div>
</div> </div>
</body>
</html>
css3太极图效果+自动旋转的更多相关文章
- css3实现色子自动翻转效果
原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...
- 用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...
- iOS系统自带的 UIAlertView 自动旋转的实现
这里主要解析 UIAlertView 的几个关键功能的实现: 随着设备屏幕的旋转而旋转: Alert弹出框,使用UIWindow来实现,就是说,不用依赖于当前显示在最前面的UIView. 实现源码参考 ...
- css3 3D效果
css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...
- 那些不错的 [ Html5 + CSS3 + Canvas ] 效果！
apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...
- CSS3动画效果之Transform
无意中翻看博客发现这个属性,就顺便熟悉了一下,百度了一下和查看了CSS3帮助文档,特整理一下 Transform 适应于对任一DOM元素的2D或3D转换,转换效果有:旋转.拉伸.平移.倾斜等. 目前浏 ...
- CSS3实现3D木块旋转动画
CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...
- CSS3轻松实现彩色旋转六面体动画
一.效果预览: 二.基本思路: 1.首先这个一个自动触发的动画,因此应使用animation设计,包括自动组装和组装完成后自动旋转的过程: 2.当鼠标放上去的时候六个面及上面的字体均变色,应在六个面设 ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
随机推荐
- [Javascript + lodash] sortBy and sortedIndex
sortBy: var collection = ['John', 'Petteri', 'Antti', 'Joonas', 'Zhentian']; var sorted = _.sortBy(c ...
- [Embed(source="asset.swf")] 使用其中的所有资源
在AS3中,我们可以使用 [Embed(source="asset.swf", symbol="symbol")] private var symbolClas ...
- Android Settings 导入eclipse
1.加载源码 Android Project from Existing Code 选择源码工程Settings: 2.加载所需要的jar包 (改下名字) out/target/common/obj/ ...
- Eclipse 常用快捷键与使用技巧总结
一.实用类快捷键 1 常用熟悉的快捷键 CTRL+C(复制).CTRL+X(剪切).CTRL+Z(撤销).CTRL+F(查找).CTRL+H(搜索文件或字符串).CTRL+/(双斜杠注释).ALT+/ ...
- c++算法联系，冒泡排序，bubble sort，插入排序，insert sort，
#include <iostream.h> #define MAX 100 void dispaly(int a[],int n) { for(int i=0;i<n;i+ ...
- Lucene 搜索功能
搜索过程 图解: 主要 API: IndexSearcher: //所有搜索都通过 IndexSearcher 进行,他们将调用该类中重载的 search() 方法 Query: ...
- ElasticSearch Search API 简介
REST request URI curl 'localhost:9200/bank/_search?q=*&pretty' 1. localhost:9200/bank/_search,以 ...
- Redis failover过程
在Leader触发failover之前,首先wait数秒(随即0~5),以便让其他sentinel实例准备和调整.如果一切正常,那么leader就需要开始将一个salve提升为master,此slav ...
- dedecms获取字段
在详情页中调用字段使用{dede:field name='title’/} 在列表页调用字段使用: {dede:list} 我是标题:[field:title/],我的的url:[field:youk ...
- 揭开CSS3媒体查询迷雾（min-width和max-width）
本文参考MichelleKlann的Media Queries Demystified: Min-Width and Max-Width 媒体查询(media queries)是响应式设计(Respo ...