css太极
自己用css实现的自转动的太极，就当留个纪念。
用css实现太极有很多种实现方法，我这种大概是最简单的了吧，因为div用得太多了，哈哈。
高级一点的应该是用伪类:before和:after去减少div的用量。
当然了，我知道是因为我也用伪类来实现过太极，只是说当初写的源码找不到了，找了一下找不到就放弃了。
就像人生一样，有些东西丢了就再也找不回来了。也或许可以找回来，但是已经没有找回来的必要了。
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>太极</title> <style type="text/css">
* {
border: 0;
margin: 0;
padding: 0;
}
.taiji {
width: 400px;
height: 400px;
border: 1px solid black;
border-radius: 50%;
animation: spin 6s linear infinite;
position: relative;
margin: 100px auto;
}
.taiji_half {
width: 200px;
height: 400px;
position: absolute;
}
.taiji_half_black {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
background: black;
}
.taiji_half_white {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
background: white;
left: 200px;
}
.taiji_circle_big {
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
left: 100px;
}
.taiji_circle_big_black {
background: black;
}
.taiji_circle_big_white {
background: white;
top: 200px;
}
.taiji_circle_small {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
left: 75px;
top: 75px;
}
.taiji_circle_small_white {
background: white;
}
.taiji_circle_small_black {
background: black;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="taiji">
<div class="taiji_half taiji_half_black"></div>
<div class="taiji_half taiji_half_white"></div>
<div class="taiji_circle_big taiji_circle_big_black">
<div class="taiji_circle_small taiji_circle_small_white"></div>
</div>
<div class="taiji_circle_big taiji_circle_big_white">
<div class="taiji_circle_small taiji_circle_small_black"></div>
</div>
</div>
</body>
</html>
内容很简单，就这些了。
难点的话应该主要在【居中】和【圆角】上，要弄懂其实也不难。
今天在整理电脑文件的时候无意中整理出来的，所以想保存一下，只是突然觉得时间真的是令人猝不及防的东西。
"高中时一个同学沉迷网络，时常半夜翻墙出校上网。一夜他照例翻墙，只是翻到一半就拔足狂奔而归，面色古怪，问之不语。从此认真读书，不再上网，学校盛传他见鬼了。后来他考上了名校，再问此事的时候，他沉默良久之后终于开口，那天父亲来送生活费，舍不得住旅馆，在墙下坐了一夜。"
css太极的更多相关文章
- 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- css实例——“旋转”太极八卦图
话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- CSS实现太极效果
这个伪元素的位置对齐还妹搞明白 需要再研究研究 <html> <head> <title>taiji</title> <style> b ...
- 太极旋转-JS实现
刚学了js的一些函数,所以做了一个太极的旋转.做完之后是上面这个样子的,是可以旋转的. 思路: 1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动. 2.画两个半圆,主要属性是border-to ...
- 摘记 史上最强大的40多个纯CSS绘制的图形（一）
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
- [css]【转载】CSS样式分离之再分离
原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...
- 特殊的css样式
在一定范围大小变化的div .div { width:auto; height:auto; min-height:100px; min-width:100px; max-height:200px; m ...
随机推荐
- TCP三次握手四次挥手过程详解
http://blog.csdn.net/imilli/article/details/50620104 TCP头部: 其中 ACK SYN 序号 这三个部分在以下会用到,它们的介绍也在下面. ...
- HDFS的dfs.replication不同验证
对于上传文件到hdfs上时,当时hadoop的副本系数是几,这个文件的块数副本数就会有几份,无论以后你怎么更改系统副本系统,这个文件的副本数都不会改变,也就说上传到分布式系统上的文件副本数由当时的系统 ...
- Python 带参数的装饰器 [2] 函数参数类型检查
在Python中,不知道函数参数类型是一个很正常的事情,特别是在一个大项目里.我见过有些项目里,每一个函数体的前十几行都在检查参数类型,这实在是太麻烦了.而且一旦参数有改动,这部分也需要改动.下面我们 ...
- pm2命令，端口查询，mongodb服务启动，nginx服务启动，n模块的使用，搭建nodejs服务器环境，搭建oracledb服务器环境 linux的环境搭建
pm2命令 pm2 ls //查询pm2 启动的列表 pm2 start app.js //启动文件 pm2 restart app //重启项目 pm2 logs app //监控项目执行日志打印 ...
- 为什么matlab激活完后还要激活（Matlab2012b license失效解决办法）
第一步:打开matlab安装路径中的license文件夹,删除其中的lic文件 第二步:更换新的license.lic文件 第三步:重新打开matlab 搞定! license.lic文件的内容是: ...
- 在Windows .NET平台下使用Memcached （Enyim使用）
1. 启动并配置Memcached的服务端 1. 下载Memcached http://download.csdn.net/download/ful1021/7969231 2. 解压到任意目录下, ...
- 手动安装 Eclipse 插件 Viplugin
对 Vimer 来说,切换到 Eclipse 环境,传统的码code方式明显降低效率,Viplugin 是一款类 Vi 模拟器,能实现 Vi 的基本编辑功能. 安装方法 (适用于Windows 和 L ...
- ubuntu部分端口命令的使用----开启端口/开启防火墙
环境系统: ubuntu 工具:xshell + virtualbox 1.测试远程主机的端口是否开启(windows命令行下执行) telnet 192.168.1.103 80 远程访问主机的80 ...
- python：HTMLTestRunner测试报告优化
之前的博客有介绍过python的单元测试框架unittest,基于其扩展的测试报告模块HTMLTestRunner,不过这个报告本身的界面看起来太丑... 趁着今天有时间,找了两个二次开发优化后的HT ...
- 腾讯首批 5000 人群，现在加入【FineUI总群】，极速体验！
腾讯首批 5000 人群,稀缺资源,绝无仅有,快来体验! 加群链接:http://shang.qq.com/wpa/qunwpa?idkey=e81f012f9920c25a77c4fd8b0c767 ...