太极旋转简单实现

最新推荐文章于 2023-07-04 21:30:32 发布

萧徵心

最新推荐文章于 2023-07-04 21:30:32 发布

阅读量362

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/qq_44953009/article/details/104730389

版权

第一次写博客操作一脸懵逼

第二次写这玩意, 第一次写的时候用的拼接法, 繁琐且累赘.

直接上图 :
上图先

!-- 思路 :
1 大盒子对半线性渐变实现黑白半圆
2 中圆及小圆都用伪元素
3 给小圆宽高中圆用小圆的 border值实现
4 flex 主轴为 x轴元素会排列在一行上垂直居中压住

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenst</title>
    
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #333;
        }
        div {
            display: flex;
            /* align-content 对于两个同级并且在一行显示的元素无效 */
            align-items: center;
            margin:  100px auto;
            overflow: hidden;
            border-radius: 50%;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            -moz-animation: move 3s linear infinite;
            -o-animation: move 3s linear infinite;
            -webkit-animation: move 3s linear infinite;
            animation: move 3s linear infinite;
            background:-webkit-linear-gradient(black 50%, white 50%);
            background:-moz-linear-gradient(black 50%, white 50%);
            background:-ms-linear-gradient(black 50%, white 50%);
            background:-o-linear-gradient(black 50%, white 50%);
            background:linear-gradient(black 50%, white 50%);
        }
        div::after, div::before{
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            border: 75px solid transparent;
            border-radius: 50%;
        }
        div::after {
            border-color: #000;
            background-color: #fff;
        }
        div::before {
            border-color: #fff;
            background-color: #000;
        }
    
        @-o-keyframes move{
             from{ transform:rotate(0deg);
             }
             to{ transform:rotate(360deg);
             }
         }
        @-moz-keyframes move{
             from{ transform:rotate(0deg);
             }
             to{ transform:rotate(360deg);
             }
         }
        @-webkit-keyframes move{
             from{ transform:rotate(0deg);
             }
             to{ transform:rotate(360deg);
             }
         }
         @keyframes move{
             from{ transform:rotate(0deg);
             }
             to{ transform:rotate(360deg);
|  |  |
|--|--|
|  |  |

             }
         }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

萧徵心

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
太极旋转简单实现

第一次写博客操作一脸懵逼第二次写这玩意, 第一次写的时候用的拼接法, 繁琐且累赘.直接上图 :!-- 思路 :1 大盒子对半线性渐变实现黑白半圆2 中圆及小圆都用伪元素3 给小圆宽高中圆用小圆的 border值实现4 flex 主轴为 x轴元素会排列在一行上垂直居中压住<!DOCTYPE html><html lang="en"&...
复制链接

扫一扫