css3 实现太极图

<!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>

参考链接： https://c.runoob.com/codedemo/5126

css3 实现太极图相关推荐

css3 画太极图——用三个div实现
(1)首先,绘制背景: <!doctype html> <html lang="en"><head><meta charset=" ...
CSS3之太极图源代码
太极图实现起来很简单,就是把多个标签利用border-radius设置成圆形,然后多个圆利用position定位重叠在一起代码如下: 1 <!DOCTYPE html> 2 <ht ...
css3 画太极图——用一个div实现
(1)绘制两个半圆: <!DOCTYPE html> <html> <head><meta charset="UTF-8">< ...
CSS3实现太极图教程
我们先来看效果: 制作步骤: 1.先画个半圆 .box{ width: 300px;height: 150px;margin: 10em auto;border-width: 150px 0 0 0; ...
css3动画之太极图
css3动画之太极图 <!DOCTYPE html> <html><head><meta charset="utf-8"><t ...
css3太极图效果+自动旋转
主要使用border-radius属性实现圆,半圆,定位坐标覆盖部分模块. 半圆: width: 50%; height: 100%; border-radius:100% 0 0 100% /50% ...
CSS3画八卦太极图（绕一个圆旋转）
html代码: <div class="mydiv2"> <div class="div2"></div> </div ...
css3实现旋转太极图
话不多说,先看效果图: 实现过程如下: 1.首先放三个盒子,分别为大背景以及上面的两个小圆. <div id="" class="divClass"> ...
太极怎么用html写出来,如何用css实现太极图
太极图 *{ margin: 0; padding: 0; } body{ background-color: #ddd; } .boxs{ display: flex; align-items: c ...

css3 实现太极图

css3 实现太极图相关推荐

最新文章

热门文章

css3 实现 太极图

css3 实现 太极图相关推荐

最新文章

热门文章

css3 实现太极图

css3 实现太极图相关推荐