自己用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太极的更多相关文章

  1. 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图

    1. DIV + CSS 练习:太极阴阳图.  基本思路:由三个div块元素组成:  #taiji太极阴阳图底面  #yin太极阴阳图阴面小圆  #yang太极阴阳图阳面小圆  (太极阴阳图:上为阳下 ...

  2. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. css实例——“旋转”太极八卦图

    话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  4. CSS实现太极效果

    这个伪元素的位置对齐还妹搞明白 需要再研究研究   <html> <head> <title>taiji</title> <style> b ...

  5. 太极旋转-JS实现

    刚学了js的一些函数,所以做了一个太极的旋转.做完之后是上面这个样子的,是可以旋转的. 思路: 1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动. 2.画两个半圆,主要属性是border-to ...

  6. 摘记 史上最强大的40多个纯CSS绘制的图形(一)

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  7. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  8. [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 ...

  9. 特殊的css样式

    在一定范围大小变化的div .div { width:auto; height:auto; min-height:100px; min-width:100px; max-height:200px; m ...

随机推荐

  1. S/4 HANA中的MATDOC和MATDOC_EXTRACT

    最近做了销售和物料管理方面的一些需求,因此对S/4中的MM的数据模型有了一定的了解.目前网络已经有一些介绍物料凭证表MATDOC的文章,内容好像不是很详细,另外也没发现介绍库存变更数据表MATDOC_ ...

  2. HTTP请求报文解剖

    转自:https://www.iteye.com/topic/1124408 HTTP请求报文由3部分组成(请求行+请求头+请求体): 下面是一个实际的请求报文: ①是请求方法,GET和POST是最常 ...

  3. Tesseract-OCR识别

    参考 https://studygolang.com/topics/4527/comment/13217 安装版Windows下链接: https://digi.bib.uni-mannheim.de ...

  4. 测试一下robotgo自动化操作,顺便解决了原来的mingw版本中只有gcc,没有g++的问题

    参考:https://gitee.com/veni0/robotgo#examples  但是编译不成功 找到这个:https://gitee.com/veni0/robotgo#examples ( ...

  5. 转://利用从awr中查找好的执行计划来优化SQL

    原文地址:http://blog.csdn.net/zengxuewen2045/article/details/53495613 同事反应系统慢,看下是不是有锁了,登入数据库检查,没有异常锁定,但发 ...

  6. 【转】Win10开机密码忘了?教你破解Win10开机密码

    [PConline 技巧]Win10开机密码忘记了怎么办?这个问题很多人都遇到过,如何破解一台Win10电脑的开机密码呢(非BIOS开机密码)?其实很简单,利用下面这个方法,分分钟就能搞定. 一招破解 ...

  7. Python:Day07 作业

    三级菜单: 自己做的代码: china = { '江苏':{ '南京':{ '江宁':{}, '白下':{}, '栖霞':{}, '江淮':{}, '浦口':{} }, '宿迁':{ '宿城区':{} ...

  8. ubantu服务器配置ss

    阿里云 ubantu16.0(自带pip) 服务端 $ apt-get install python-pip $ pip install shadowsocks $ vim /etc/shadowso ...

  9. 英文字母对应的Unicode编码

    A~Z :65~90 a~z :97~122 0-9 : 48-57 如果想要知道字符串中的值是否是小写英文字符,不使用工具包的一种方法就是使用Unicode编码值,举例: package main ...

  10. ajax如何增加请求头

    代码如下(主要关键就是headers,大家可以根据需要来增加请求头): $.ajax({ type: "POST", timeout: , // 超时时间 10 秒 headers ...