其他分享
首页 > 其他分享> > HTML+CSS方块跳动

HTML+CSS方块跳动

作者:互联网

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>

标签:50px,transform,rotateZ,HTML,CSS,margin,方块,200px
来源: https://blog.csdn.net/WCvison/article/details/114649712