Html+Css动态效果——旋转的小球

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

鱼豆腐＆

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

阅读量991

点赞数 1

分类专栏： HTML+CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_44700714/article/details/109860431

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

旋转的小球

HTMl代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转的小球</title>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

CSS代码

 .box{
        width: 120px;
        height: 120px;
        position: relative;
    }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
    }
    .box div{
        height: 40%;
        width: 40%;
        border-radius: 50%;
        position: absolute;
        animation: donghua 2s ease infinite;
    }
    .box :nth-child(1){
        background: green;
    }
    .box :nth-child(2){
        background: blue;
        animation-delay: -0.5s;
    }
    .box :nth-child(3){
        background: rebeccapurple;
        animation-delay: -1s;
    }
    .box :nth-child(4){
        background: yellow;

        animation-delay: -1.5s;
    }
    @keyframes donghua {
        0%,100%{
            transform: translate(0,0);
        }
        25%{
            transform: translate(150%,0);
        }
        50%{
            transform: translate(150%,150%);
        }
        75%{
            transform: translate(0,150%);
        }
    }

视频演示
旋转的小球

鱼豆腐＆

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html+Css动态效果——旋转的小球

旋转的小球HTMl代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转的小球</title></head><body> &
复制链接

扫一扫