旋转的八卦图，纯CSS实现

来源：互联网发布：firewall cmd 80端口编辑：程序博客网时间：2024/06/14 15:06

欢迎来到Altaba的博客

不废话，直接上源码，旋转八卦图的核心在于CSS代码的编写，所有首先呈上CSS代码：

.yang-yin2{            width: 198px;            height: 396px;            border: solid black;            border-width: 2px 200px 2px 2px;            background-color: #fff;            border-radius: 50%;            position: absolute;            animation: gun 2s linear infinite;            margin: auto;            top: 0;            left: 0;            right: 0;            bottom: 0;        }        .yang-yin2:before{            content: " ";            position: absolute;            width: 28px;            height: 28px;            background-color: black;            border: 85px #ffffff solid;            border-radius: 50%;            top: 0;            left: 50%;        }        .yang-yin2:after{            content: " ";            position: absolute;            width: 28px;            height: 28px;            background-color: #ffffff;            border: 85px black solid;            border-radius: 50%;            top: 50%;            left: 50%;        }

@keyframes gun {            0%{                transform: rotate(0deg);            }            100%{                transform: rotate(360deg);            }        }

HTML代码：

<div class="yang-yin2"></div>

详解：css主要运用了伪元素：after和：before,和css3的变形transform：rotate旋转，和动画animation，具体知识点可百度3WC了解，初级版本是这样，还可以玩的很花，大家可以自行修改动画样式，谢谢阅读

0 0