自己用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>
内容很简单,就这些了。
难点的话应该主要在【居中】和【圆角】上,要弄懂其实也不难。
今天在整理电脑文件的时候无意中整理出来的,所以想保存一下,只是突然觉得时间真的是令人猝不及防的东西。
"高中时一个同学沉迷网络,时常半夜翻墙出校上网。一夜他照例翻墙,只是翻到一半就拔足狂奔而归,面色古怪,问之不语。从此认真读书,不再上网,学校盛传他见鬼了。后来他考上了名校,再问此事的时候,他沉默良久之后终于开口,那天父亲来送生活费,舍不得住旅馆,在墙下坐了一夜。"