绘制太极图(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 黑色中的白色小园 -->