css3实现旋转太极图

最新推荐文章于 2022-10-12 16:40:05 发布

学习中的技术小白

最新推荐文章于 2022-10-12 16:40:05 发布

阅读量3k

点赞数 3

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/qq_37111953/article/details/78522037

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

话不多说，先看效果图：

这里写图片描述

实现过程如下：
1.首先放三个盒子，分别为大背景以及上面的两个小圆。

<div id="" class="divClass">
    <div id="" class="left">
    </div>
    <div id="" class="right">
    </div>
</div>

2.巧用border、after、before实现大背景图。

.divClass {
    border: 100px solid ;
    border-color: white white black black;      
    width: 0;
    height: 0;
    border-radius: 100%;
    position: absolute;
    top: 100px;
    left: 100px;
    box-shadow: 0 0 50px #707070;
}
.divClass:before {
    content: "";
    position: absolute;
    top: -85px;
    left: -85px;
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 100%;
}
.divClass:after {
    content: "";
    position: absolute;
    top: -15px;
    left: -14px;
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 100%;
}

这里写图片描述

3.画出上面的两个小圆

.left{
    background-color:white;
    width:50px;
    height: 50px;
    position: relative;
    border-radius: 100%;
    top: -65px;
    left: -65px;
}
.right{
    background-color:black;
    width:50px;
    height: 50px;
    position: relative;
    border-radius: 100%;
    top: -40px;
    left: 15px;
    z-index: 1;    /*若是不设置的话，父元素的after会覆盖这部分内容*/
}

这里写图片描述

4.整体加上动画，让旋转起来。

.divClass {
border: 100px solid ;
    border-color: white white black black;      
    width: 0;
    height: 0;
    border-radius: 100%;
    position: absolute;
    top: 100px;
    left: 100px;
    transform-origin: 50% 50%;       /*设置以中心为原点进行旋转*/
    animation: run 2.5s linear infinite;    /*执行动画run，每次执行时间为2.5s ,从开头到结尾以相同的速度来播放动画，重复播放*/
    box-shadow: 0 0 50px #707070;
}
@keyframes run{         /*定义动画run的具体动作*/
    from{
        transform: rotate(0deg);
    }
    /*50%{
        transform: rotate(180deg);
    }*/
    to{
        transform: rotate(360deg);
    }
}

完整代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }

            .divClass {
                border: 100px solid ;
                border-color: white white black black;      
                width: 0;
                height: 0;
                border-radius: 100%;
                position: absolute;
                top: 100px;
                left: 100px;
                transform-origin: 50% 50%;       /*设置以中心为原点进行旋转*/
                animation: run 2.5s linear infinite;    /*执行动画run，每次执行时间为2.5s ,从开头到结尾以相同的速度来播放动画，重复播放*/
                box-shadow: 0 0 50px #707070;
            }
            @keyframes run{
                from{
                    transform: rotate(0deg);
                }
                /*50%{
                    transform: rotate(180deg);
                }*/
                to{
                    transform: rotate(360deg);
                }
            }

            .divClass:before {
                content: "";
                position: absolute;
                top: -85px;
                left: -85px;
                width: 100px;
                height: 100px;
                background-color: black;
                border-radius: 100%;
            }
            .divClass:after {
                content: "";
                position: absolute;
                top: -15px;
                left: -14px;
                width: 100px;
                height: 100px;
                background-color: white;
                border-radius: 100%;
            }
            .left{
                background-color:white;
                width:50px;
                height: 50px;
                position: relative;
                border-radius: 100%;
                top: -65px;
                left: -65px;
            }
            .right{
                background-color:black;
                width:50px;
                height: 50px;
                position: relative;
                border-radius: 100%;
                top: -40px;
                left: 15px;
                z-index: 1;    /*若是不设置的话，父元素的after会覆盖这部分内容*/
            }
        </style>
    </head>

    <body>
        <div id="" class="divClass">
            <div id="" class="left">
            </div>
            <div id="" class="right">
            </div>
        </div>
    </body>
</html>