网页编程网

www.youkud.com

当前位置：主页 >> html5 >> 正文

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

阅读：3815 输入：2020-07-01 11:36:38

<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>

上一篇：css3设计伪元素实现吃豆豆动画特效
下一篇：css实现对话框并居中，应用立即执行函数（需改进）

相关阅读: css3实现加载动画，边框跑马灯; css3动画实现跳动的心，相对定位; css3单独计算每个div的值，实现时空穿梭

下载专区: 软件下载（提取码：mtag）

Tag

HTML工具: 进制间转换; 进制转换（带小数）; html代码运行

HTML工具: 字母翻转; 硬盘整数分区; html颜色代码

HTML工具: 除空格回车; 万年历; fojiao

HTML工具: 小游戏; 在线绘画; 更多

手机版
联系微信:jingqishens