用CSS3做一个会旋转的太极图

最新推荐文章于 2021-11-24 21:48:10 发布

木木有只猫

最新推荐文章于 2021-11-24 21:48:10 发布

阅读量269

点赞数 1

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/weixin_45336716/article/details/120051984

版权

先看源码：

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: rgb(79, 200, 248);
        }
        
        div {
            width: 200px;
            height: 400px;
            background-color: white;
            border-left: 200px solid black;
            margin: 50px auto;
            border-radius: 50%;
            transition: all .6s ease-in-out;
            -webkit-transition: all .6s ease-in-out;
            -moz-transition: all .6s ease-in-out;
            -o-transition: all .6s ease-in-out;
        }
        
        div::before,
        div::after {
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-left: -100px;
        }
        
        div::before {
            background-color: white;
            border: 75px solid black;
        }
        
        div::after {
            background-color: black;
            border: 75px solid white;
        }
        
        div:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }
    </style>
<body>
    <div></div>
</body>

第1步：这其中我们首先创建一个背景为白色的盒子，然后给盒子加上跟盒子一样大小的黑边框

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: rgb(60, 124, 241);
        }
        
        div {
            margin: 50px auto;
            width: 200px;
            height: 400px;
            background-color: white;
            border-left: 200px solid black;
        }
    </style>
<body>
    <div></div>
</body>

第2步：将这个盒子加入border-radius: 50%;变成圆形

第3步：用伪元素::before、::after给盒子前后加入两个小盒子，作为太极图的两个圆。给两个小盒子背景分别设为白色和黑黑色,并且给他们加上边框，合起来为大盒子的一半

第4步：让两个盒子向左移动能居中，并加入border-radius: 50%;变成圆形

第5步：给整个盒子加入鼠标移动到上面会旋转360度的动画：transform: rotate(360deg);

第6步：给第5步的动画加入过渡：transition: all .6s ease-in-out;

木木有只猫

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用CSS3做一个会旋转的太极图

先看源码： <style> * { margin: 0; padding: 0; } body { background-color: rgb(79, 200, 248); } div { width: 200px; height: 4...
复制链接

扫一扫