旋转的彩色球体

最新推荐文章于 2024-07-25 14:15:14 发布

可爱又迷人的反派少女

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量195

点赞数 1

分类专栏：动画效果文章标签： css

本文链接：https://blog.csdn.net/weixin_48291770/article/details/107521533

版权

动画效果专栏收录该内容

2 篇文章 0 订阅

订阅专栏

给每一个圆的旋转动画设置延迟时间，使得球体在旋转的同时像彩色
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            overflow: hidden;  /*溢出隐藏*/
        }
        .circle{      /*设置圆的大小颜色位置*/
            width:150px;
            height: 150px;
            border: 1px solid red;
            margin: auto;
            border-radius: 50%;
            position: absolute;
            left:0px;
            top:0px;
            right:0px;
            bottom:0px;
        
            
        }

        @keyframes run{    /*创建动画*/
            0%{
                transform: rotate3d(0,0,0,0deg);
                border-color: tomato;
            }
            25%{
                border-color:green;
            }
            50%{
                border-color: blue;
            }
            75%{
                border-color: yellow;
            }
            100%{
                border-color: orangered;
                transform: rotate3d(1,1,1,360deg);
        }
        }
    </style>
</head>
<body>
     
            <!-- 动画名称  完成动画的时间（s/ms） 曲线速度  延迟时间  动画播放的次数 -->
            <div class="circle" style="animation: run 2s linear 0.1s infinite;"></div>
            <div class="circle" style="animation: run 2s linear 0.2s infinite;"></div>
            <div class="circle" style="animation: run 2s linear 0.3s infinite;"></div>
            <div class="circle" style="animation: run 2s linear 0.4s infinite;"></div>
            <div class="circle" style="animation: run 2s linear 0.5s infinite;"></div>
            <div class="circle" style="animation: run 2s linear 0.6s infinite;"></div>
            <div class="circle" style="animation: run 2s linear 0.7s infinite;"></div>
            <div class="circle" style="animation: run 2s linear 0.8s infinite;"></div>
            <div class="circle" style="animation: run 2s linear 0.9s infinite;"></div>
            <div class="circle" style="animation: run 2s linear 1s infinite;">  </div>
            <div class="circle" style="animation: run 2s linear 1.2s infinite;"></div>
            <div class="circle" style="animation: run 2s linear 1.3s infinite;"></div>
            <div class="circle" style="animation: run 2s linear 1.4s infinite;"></div>
            <div class="circle" style="animation: run 2s linear 1.5s infinite;"></div>



</body>
</html>

transform 3D

transform:rotateX(); 前后旋转

transform:rotateY() 左右旋转

transform:rotateZ(); 平面旋转

transform:rotate3d(x,y,z,deg); x,y,z分别代表xyz轴是否旋转

0不旋转，1旋转

可爱又迷人的反派少女

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旋转的彩色球体

给每一个圆的旋转动画设置延迟时间，使得球体在旋转的同时像彩色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ overflow: hidden; /*溢出隐藏*/ } .ci
复制链接

扫一扫

专栏目录