html旋转动画

最新推荐文章于 2024-05-10 09:31:47 发布

Charlie·

最新推荐文章于 2024-05-10 09:31:47 发布

阅读量1.1k

点赞数

分类专栏：混合开发文章标签： html最简单旋转动画

本文链接：https://blog.csdn.net/Mydtudysy/article/details/77777138

版权

混合开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bigCircle{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background:green;
            margin: 0 auto;
           position: relative;
            animation: run2 4s infinite linear;
        }
        .smCircle{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: black;
            margin: 200px auto;
            position: absolute;
            animation: run 4s infinite linear;
        }
        .smCircle2{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #666;
            margin: 280px auto;
            position: absolute;
            animation: run 5s infinite linear;
        }.smCircle3{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: red;
            margin: 360px auto;
            position: absolute;
            animation: run 6s infinite linear;
        }.smCircle4{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: paleturquoise;
            margin: 420px auto;
            position: absolute;
            animation: run 7s infinite linear;
        }.smCircle5{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rebeccapurple;
            margin: 500px auto;
            position: absolute;
            animation: run 8s infinite linear;
        }.smCircle6{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: blue;
            margin: 580px auto;
            position: absolute;
            animation: run 2s infinite linear;
        }.smCircle7{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: chartreuse;
            margin: 660px auto;
            position: absolute;
            animation: run 6s infinite linear;
        }
        @keyframes run2 {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        @keyframes run {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(-360deg);
            }
        }
    </style>
</head>
<body>
    <div class="bigCircle">大圈
        <div class="smCircle">dddddd

                <div class="smCircle3">dddddd</div>

                <div class="smCircle5">
                    <div class="smCircle4">dddddd</div>
                    dddddd
                    <div class="smCircle6">dddddd</div>
                    <div class="smCircle7">dddddd</div>
                </div>
                <div class="smCircle2">dddddd
            </div>

        </div>

    </div>

</body>
</html>

Charlie·

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html旋转动画

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> .bigCircle{ width: 200px; height: 200px; border-radius: 50%;
复制链接

扫一扫