c3+h5入门案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
        margin: 0;
        padding: 0;
    }
        img{
            width: 100px;
            transform: translate(-30px, 100px)  rotate(-180deg) scale(1);
            animation: ball 5s ease-in infinite;
        }
        @keyframes ball {
        0%{transform: translate(-30px, 100px) rotate(-180deg) scale(1);}
        25%{transform: translate(400px, 500px) rotate(360deg) scale(2);}
        50%{transform: translate(1000px,300px) rotate(-180deg) scale(1);}
        75%{transform: translate(400px, -30px) rotate(360deg) scale(0.5);}
        100%{transform: translate(-30px, 100px) rotate(-180deg) scale(1);}
        }
    </style>
</head>
<body>
<img src="images/ball.jpg" alt="">
</body>
</html>

效果出来有3D效果，案例包含动画知识点

/*调用动画*/
            /*animation: 动画名称 花费时间 运动曲线 等待时间 播放次数(无限播放) 是否反方向播放(alternate)*/
            animation: move 2s linear 2s infinite alternate;/*默认是正方向播放*/

告辞！

猜你喜欢