CSS / 动画（3）

最新推荐文章于 2024-11-14 17:40:35 发布

GllWyz

最新推荐文章于 2024-11-14 17:40:35 发布

阅读量174

点赞数

分类专栏： # CSS动画文章标签： css动画 transform css 3D动效

本文链接：https://blog.csdn.net/zhumizhumi/article/details/85785213

版权

CSS动画专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果地址：http://wuyanzhi.gitee.io/rotating_animation

借鉴作者：https://blog.csdn.net/hdq1745/article/details/85489329

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
                outline: none;
            }
            html, body{
                width: 100%;
                height: 100%;
            }
            body{
                /* background: radial-gradient(圆点位置, 形状, 尺寸， 第一个渲染的颜色以及要显示的位置, 第二个渲染的颜色以及要显示的位置。。。); */
                /* 1、圆点位置： 默认是center，可以自己写比例 比如  （10% 40%） */
                /* 2、形状：默认为ellipse， ellipse表示椭圆形，circle表示圆形*/
                /* 3、尺寸： 渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角*/
                /* 4、渲染的颜色以及要显示的位置：要显示的位置可以不写，默认就会自动均分排列 */
                background: radial-gradient(ellipse at 10% 40%, #34679a 0%, #214163 50%, #0d1926 100%)
            }
            body>div{
                width: 200px;
                height: 200px;
                border: 1px solid #ffffff;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -100px;
                margin-top: -100px;
                transform-style: preserve-3d;
            }
            body > div:nth-of-type(1){
                transform: rotateX(80deg) rotateY(20deg)
            }
            body > div:nth-of-type(2){
                transform: rotateX(-80deg) rotateY(20deg)
            }
            body > div:nth-of-type(3){
                transform: rotateX(70deg) rotateY(60deg)
            }
            body > div:nth-of-type(4){
                transform: rotateX(-70deg) rotateY(60deg)
            }
            body > div::after{
                content: "";
                width: 40px;
                height: 40px;
                background: #fff;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -20px;
                margin-left: -20px;
                transform: rotateX(80deg);
                border-radius: 50%;
            }
            body>div>div{
                width: 200px;
                height: 200px;
                transform-style: preserve-3d;
                /* 这一步这个div是转动的  只是颜色都是一样的看不到  鼠标移动上去的时候就会发现一直在转动  0deg-360deg */
                animation: trail 1s infinite linear;
            }
            @keyframes trail{
                from{
                    transform: rotateZ(0deg);
                }
                to{
                   transform: rotateZ(360deg); 
                }
            }
            /* 这个是div上的小块的样式  和转动 */
            body > div > div::after{
                content: "";
                width: 5px;
                height: 5px;
                position: absolute;
                background: red;
                border-radius: 50%;
                top: -5px;
                left: 50%;
                margin-left: -5px;
                box-shadow:  0 0 12px #fff;
                animation: particle 1s infinite linear;
            }
            @keyframes particle{
                from{
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to{
                    transform: rotateX(-360deg) rotateY(-360deg);
                }
            }
            body>div:nth-of-type(2)>div,
            body>div:nth-of-type(2)>div::after{
                animation-delay: -0.5s;
            }
            body>div:nth-of-type(3)>div,
            body>div:nth-of-type(3)>div::after{
                animation-delay: -1s;
            }
            body>div:nth-of-type(4)>div,
            body>div:nth-of-type(4)>div::after{
                animation-delay: -1.5s;
            }
        </style>
    </head>
    <body>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </body>
</html>