css3设计伪元素实现太极阴阳图特效

主页 M

css3设计伪元素实现太极阴阳图特效

2020-07-01 网页编程网 网页编程网

<style>
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.background{
    width: 100%;
    height: 100%;
    background: darkgray;
    position: fixed;
    /*定位  ->    absolute(生成绝对定位元素，相对于父级元素进行定位)
                fixed（生成绝对定位元素，相对于浏览器窗口进行定位）
                relative（生成相对定位元素，相对于其正常位置进行定位）*/
}
.box{
    width: 400px;
    height: 400px;
    border-radius:50%;
    position: absolute;    /*因为父级元素有了定位，所以这里用absolute*/
    top: 0;                /*上、下、左、右四个属性值来实现元素位置的改变*/
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation:run 5s infinite linear;
}
.Black{
    width: 200px;
    height: 400px;
    background: black;
    border-radius: 200px 0 0 200px;        /*形成一个黑色的左半圆*/
    position: absolute;
}
.White{
    width: 200px;
    height: 400px;
    background: white;
    border-radius:0 200px 200px 0;        /*形成一个白色的左半圆*/
    left: 200px;
    position: absolute;
}
.medium_black{
    width: 200px;
    height: 200px;
    background: black;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;    /*四个属性实现了中等大小的圆在最xia边的中间的位置*/
}
.medium_white{
    width: 200px;
    height: 200px;
    background: white;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;    /*这个可以写也可以不写，因为是这个默认是在左上角的，写了上边三个属性后就己经能达到想要的效果了*/
}
.little_black{
    width: 100px;
    height: 100px;
    background: black;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50px;
}
.little_white{
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 50px;
}
@keyframes run{
    from{
        transform: rotate(0deg);/*这里不写也是可以的，因为默认的话就是0*/
    }
    to{
        transform: rotate(360deg);
    }
}
</style>
</head>
<body>
<div class="background">    
    <div class="box">
        <div class="Black"></div>
        <div class="White"></div>
        <div class="medium_black"></div>
        <div class="medium_white"></div>
        <div class="little_black"></div>
        <div class="little_white"></div>
    </div>
</div>
</body>

阅读原文

阅读 3376

123 显示电脑版