HTML+CSS方块跳动

最新推荐文章于 2021-12-02 10:45:31 发布

Cwiyc

最新推荐文章于 2021-12-02 10:45:31 发布

阅读量582

点赞数 1

分类专栏： HTML+CSS 文章标签： css3 css animation html5

本文链接：https://blog.csdn.net/WCvison/article/details/114649712

版权

HTML+CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML+CSS方块跳动

核心思想是将小方块放在隐形的大方块上，让大方块转动（rotate）带动小方块转动

将4个方块分别装上animation，注意：这4个方块的动画总时长必须是相等的，然后再用infinite无限循环，可以用不同数量的方块，但时间一定要掐好。

初学可以copy过去慢慢琢磨，我也是琢磨了好久才弄出来的！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方块跳动</title>
    <style>
        .box01{
            width: 200px;
            height: 200px;
            /* background-color: teal; */
            overflow: hidden; 
            animation: jump1 3s infinite ease-in-out;
        }
        .box11{
            width: 50px;
            height: 50px;
            border-radius: 20%;
            background-color: tomato;
            margin-top: 75px;
            margin-left: 150px;
        }
        .box02{
            width: 200px;
            height: 200px;
            margin-top: -200px;
            margin-left: 150px;
            /* background-color: teal; */
            overflow: hidden;
            animation: jump2 3s infinite ease-in-out;
        }
        .box22{
            width: 50px;
            height: 50px;
            border-radius: 20%;
            background-color: blue;
            margin-top: 75px;
            margin-left: 150px;
        }
        .box03{
            width: 200px;
            height: 200px;
            margin-top: -200px;
            margin-left: 300px;
            /* background-color: teal; */
            overflow: hidden;
            animation: jump3 3s infinite ease-in-out;
        }
        .box33{
            width: 50px;
            height: 50px;
            border-radius: 20%;
            background-color: green;
            margin-top: 75px;
            margin-left: 150px;
        }
        .box04{
            width: 200px;
            height: 200px;
            margin-top: -200px;
            margin-left: 450px;
            /* background-color: teal; */
            overflow: hidden;
            animation: jump4 3s infinite ease-in-out;
        }
        .box44{
            width: 50px;
            height: 50px;
            border-radius: 20%;
            background-color: skyblue;
            margin-top: 75px;
            margin-left: 150px;
        }
        .box0{
            width: 50px;
            height: 50px;
            position: absolute;
            top: 90px;
            background-color: teal;
            border-radius: 20%;
            animation: su 1.5s linear alternate infinite;
        }
        @keyframes su {
            to{
                margin-left: 600px;
            }
        }
        @keyframes jump1 {
            from{

            }
            12.5%,87.5%{
                transform:rotateZ(-180deg);
                animation-delay: 2s;
            }
            to{
                
            }
        }
        @keyframes jump2 {
            12.5%{
                transform: rotateZ(0deg);
            }
            25%{
                transform: rotateZ(-180deg);
            }
            75%{
                transform: rotateZ(-180deg);
            }
            87.5%{
                transform: rotateZ(0deg);
            }
        }
        @keyframes jump3 {

            25%{
                transform:rotateZ(0deg);
            }
            37.5%{
                transform: rotateZ(-180deg);
            }
            62.5%{
                transform: rotateZ(-180deg);
            }
            75%{
                transform: rotateZ(-0deg);
            }
        }
        @keyframes jump4 {
            37.5%{
                transform:rotateZ(0deg);
            }
            50%{
                transform:rotateZ(-180deg);
            }
            62.5%{
                transform:rotateZ(0deg);
            }
        }
    </style>
</head>
<body>
    <div class="box01">
        <div class="box11"></div>
    </div>
    <div class="box02">
        <div class="box22"></div>
    </div>
    <div class="box03">
        <div class="box33"></div>
    </div>
    <div class="box04">
        <div class="box44"></div>
    </div>
    <div class="box0"></div>
</body>
</html>

Cwiyc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS方块跳动

HTML+CSS方块跳动核心思想是将小方块放在隐形的大方块上，让大方块转动（rotate）带动小方块转动将4个方块分别装上animation，注意：这4个方块的动画总时长必须是相等的，然后再用infinite无限循环，可以用不同数量的方块，但时间一定要掐好。初学可以copy过去慢慢琢磨，我也是琢磨了好久才弄出来的！核心思想是将小方块放在隐形的大方块上，让大方块转动（rotate）带动小方块转动将4个方块分别装上animation，注意：这4个方块的动画总时长必须是相等的，然后再用infinite无限循环
复制链接

扫一扫