绘制太极图（CSS） |
您所在的位置：网站首页 › css写太极图 › 绘制太极图（CSS） |
绘制太极图（CSS）
|
绘制太极图（CSS）
预览图思路html布局代码部分CSS样式部分
Hello！大家好，这里是万物之恋。今天给大家带来的是CSS3动画制作一个旋转的太极图案。
预览图
先在页面中绘制出一个大的白色圆形，再将其分为两个一黑一白的半圆。然后各自延伸出一个大小适合的同颜色小圆，里面居中绘制一个对立颜色的中心圆，最后利用css3动画让其旋转。 html布局代码部分 CSS样式部分 .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; }这里是万物之恋，我们下次再见了！ |
貌似有些卡顿 是录制软件的锅。。。【本文地址】
今日新闻 |
推荐新闻 |