css3实现旋转八卦阵图

最新推荐文章于 2023-05-14 16:19:45 发布

玛丽大

最新推荐文章于 2023-05-14 16:19:45 发布

阅读量820

点赞数

文章标签： html5 css3 前端开发

本文链接：https://blog.csdn.net/qq_36937220/article/details/100835211

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>八卦旋转动图</title>
    <style type="text/css">
        div {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            width: 400px;
            height: 400px;
            margin: auto;
            border: 1px solid #000;
            border-bottom: 200px solid #000;
            border-radius: 50%;
            transform-origin: 50% 50%;
            animation-name: rotate;   /*动画名称rotate*/
            animation-duration: 5s;   /*动画持续时间5s*/
            animation-timing-function: linear;  /*线性旋转*/
            animation-iteration-count:infinite;  /*动画无限次播放*/
        }
        div::before{
            width:23px;          /*设置里面的小圆宽*/
            height:23px;          /*设置里面的小圆高*/
            content:'';
            position:absolute;
            left: 0px;
            top: 100px;
            background:#000;
            border-radius:50%;
            box-sizing: content-box;    /*让盒子随着内容的高度定，而不是还要加上border的*/
            border: 88px solid #fff;     /*设置外面一层border的宽度，400-2=398 //2是div border的宽度，(398-23)/2=88就是border的宽度*/
        }
        div::after{
            width:23px;
            height:23px;
            content:'';
            position:absolute;
            right: 0px;
            top: 100px;
            background:#fff;
            box-sizing: content-box;
            border: 88px solid #000;
            border-radius:50%;
        }
        @keyframes rotate{
            from{transform: rotate(0deg);}
            to{transform: rotate(360deg);}

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

实现效果图如下：

玛丽大

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3实现旋转八卦阵图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>八卦旋转动图</title> <style type="text/css"> div { position: ...
复制链接

扫一扫