绘制太极图（CSS）

预览图
思路
html布局代码部分
CSS样式部分

Hello！大家好，这里是万物之恋。今天给大家带来的是CSS3动画制作一个旋转的太极图案。

预览图

貌似有些卡顿是录制软件的锅。。。

思路

先在页面中绘制出一个大的白色圆形，再将其分为两个一黑一白的半圆。然后各自延伸出一个大小适合的同颜色小圆，里面居中绘制一个对立颜色的中心圆，最后利用css3动画让其旋转。

html布局代码部分

 <body><!-- 先是html代码部分 --><div class="box"><!-- .box 最外层存放的容器 --><div class="list1 lis"><!-- .list1 黑色的半圆 --><div class="bom bom1"><!-- .bom1 黑色部分延伸出来的中等圆 --><div class="bos bos1"></div><!-- .bos1 黑色中的白色小园 --></div></div><div class="list2 lis"><!-- .list2 白色的半圆 --><div class="bom bom2"><!-- .bom2 白色部分延伸出来的中等圆 --><div class="bos bos2"></div><!-- .bos1 白色中的黑色小圆 --></div></div></div></body>

CSS样式部分

     <style>.box {width: 500px;height: 500px;border-radius: 50%;margin: 40px auto;box-shadow: 0px 0px 20px 0px #000000;position: relative;background: white;/* 外层容器样式 */}.lis {width: 250px;height: 500px;/* 半圆共同样式 */}.list1 {background: black;border-radius: 250px 0px 0px 250px;transform-origin: right center;animation: move 6s linear infinite;/* 黑色半圆样式 */}.list2 {position: absolute;top: 0px;left: 250px;border-radius: 0px 250px 250px 0px;transform-origin: left center;animation: move 6s linear infinite;/* 白色半圆样式 */}@keyframes move {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}/* 半圆绑定的动画 */.bom {width: 250px;height: 250px;border-radius: 50%;/* 延伸圆的共同样式 */}.bom1 {background: black;position: absolute;top: 0px;left: 125px;/* 黑色延伸圆 */}.bom2 {background: white;position: absolute;top: 250px;left: -125px;/* 白色延伸圆 */}.bos {width: 50px;height: 50px;border-radius: 50%;position: absolute;top: 50%;left: 50%;margin: -25px 0px 0px -25px;/* 中心圆样式 */}.bos1 {background: white;}.bos2 {background: black;}</style>

这里是万物之恋，我们下次再见了！

绘制太极图（CSS）相关推荐

python turtle画椭圆-python turtle 绘制太极图的实例
效果如下所示: # -*- coding: utf-8 -*- import turtle # 绘制太极图函数 def draw_TJT(R): turtle.screensize(800, 600, ...
python turtle画太极的代码_python turtle 绘制太极图的实例
效果如下所示: # -*- coding: utf-8 -*- import turtle # 绘制太极图函数 def draw_TJT(R): turtle.screensize(800, 600, ...
html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
canvas绘制太极图
css样式代码 .animation{width: 800px;height: 800px;border: 1px solid #000; } #canvas{animation: rotate 6s ...
c语言太极图编程语言,利用C语言的Cairo图形库绘制太极图实例教程.pdf
利利用用C语语言言的的Cairo图图形形库库绘绘制制太太极极图图实实例例教教程程前前言言可能许多人对直接用C语言绘图仍然停留在T urbo C 的graphics.h年 ,或许也有教育老化的原因, ...
C语言利用Cairo图形库绘制太极图
许多人对直接用C语言绘图仍然停留在Turbo C的graphics.h年代,或许也有教育老化的原因,毕竟曾经的经典早已成往事,与其想尽各种办法寻找与其兼容的图形库,不如顺势拥抱灿烂的明天.Cario( ...
linux c语言画太极,利用C语言的Cairo图形库绘制太极图实例教程
前言可能许多人对直接用C语言绘图仍然停留在Turbo C的graphics.h年代,或许也有教育老化的原因,毕竟曾经的经典早已成往事,与其想尽各种办法寻找与其兼容的图形库,不如顺势拥抱灿烂的明天.C ...
html css绘制太极,css画太极阴阳图
前言:道生一,一生二,二生三,三生万物今天,我们来聊聊如何用 CSS 实现太极图? 在网上可以找到很多资料,不过我强推荐一个css酷炫效果的网站,我们要实现一个阴阳图,谷歌搜索关键词:css t ...
html重复div绘制,[DIV+CSS]绘制2重交叉表_html/css_WEB-ITnose
先说下scrollDiv 方法主要是为了实现表体滚动的时候表侧和表头能同时跟着滚动. 代码很简单. function scrollDiv() { document.getElementById('th ...

绘制太极图（CSS）

绘制太极图（CSS）

预览图

思路

html布局代码部分

CSS样式部分

绘制太极图（CSS）相关推荐

最新文章

热门文章