CSS3实现太极图教程

您所在的位置：网站首页 › 用cad怎么画太极图教程 › CSS3实现太极图教程

CSS3实现太极图教程

2024-07-15 05:33| 来源: 网络整理| 查看: 265

我们先来看效果：

在这里插入图片描述

制作步骤： 1、先画个半圆

在这里插入图片描述

.box{ width: 300px; height: 150px; margin: 10em auto; border-width: 150px 0 0 0; border-style: solid; border-color: #000; border-radius: 50%; position: relative; animation: taiji 1.5s linear infinite } 2、画左边的圆

在这里插入图片描述这里为了节省标签就直接用伪类了

.box:before{ content: ""; position: absolute; top: -75px; left: 0; width: 45px; height: 45px; background: #000; border: 52.5px solid #fff; border-radius: 50%; } 3、画右边的圆

在这里插入图片描述

.box:after{ content: ""; position: absolute; top: -75px; right: 0; width: 45px; height: 45px; background: #fff; border: 52.5px solid #000; border-radius: 50%; } 4、在加个动画就完美了 @keyframes taiji { from {transform: rotate(0deg)} to {transform: rotate(360deg);} }

完整代码：

小鑫博客 .box{ width: 300px; height: 150px; margin: 10em auto; border-width: 150px 0 0 0; border-style: solid; border-color: #000; border-radius: 50%; position: relative; animation: autoplay 1.5s linear infinite } .box:before{ content: ""; position: absolute; top: -75px; left: 0; width: 45px; height: 45px; background: #000; border: 52.5px solid #fff; border-radius: 50%; } .box:after{ content: ""; position: absolute; top: -75px; right: 0; width: 45px; height: 45px; background: #fff; border: 52.5px solid #000; border-radius: 50%; } @keyframes autoplay { from {transform: rotate(0deg)} to {transform: rotate(360deg)} }

这里我在补充一点：如果要改左右的圆心的大小是要计算的盒子的高度 - 伪类的边框 x 2 = 圆心的大小

【本文地址】

CSS3实现太极图教程

CSS3实现太极图教程

今日新闻

推荐新闻