css实现图片在页面中的动画特效使图中的云朵,热气球,长颈鹿和中间文字实现动画特效动画名字参照css类选择器命名动画

使图中的云朵,热气球,长颈鹿和中间文字实现动画特效

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画（重复次数）
alternate 为反向就是左右来回执行动画
forwards 动画结束停留在最后一帧状态，不循环状态使用
linear 让动画匀速执行

transform: scale(x轴缩放倍数, y轴缩放倍数);

技巧

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

transform: scale(缩放倍数);

scale值大于1表示放大, scale值小于1表示缩小

html部分

<body>
    <div class="box">
        <span>
            <img src="./images/yun1.png" alt="">
        </span>
        <span>
            <img src="./images/yun2.png" alt="">
        </span>
        <span>
            <img src="./images/yun3.png" alt="">
        </span>
        <span>
            <img src="./images/san.png" alt="">
        </span>
        <span>
            <img src="./images/lu.png" alt="">
        </span>
 
    </div>
    <div class="dazi">
    </div>
</body>

css部分

position: absolute;\
            top: 50%;\
            left: 50%;\
            transform: translate(-50%, -50%);

绝对定位使盒子居中(记得设置宽高)

<style>
        * {
            margin: 0;
            padding: 0;
        }
 
        html,
        body {
            width: 100%;
            height: 100%;
            /* 使用背景图调整大小和位置 方便不失真 */
            background: url(./images/f1_1.jpg) no-repeat center;
            background-size: cover;
        }
 
        .box>span {
            position: absolute;
            left: 50%;
            top: 0;
            width: 150px;
            height: 80px;
 
        }
 
        span:nth-child(1) {
            margin-top: 20px;
            margin-left: -300px;
            /* 对单个图片实现匀速 无限循环 来回效果 */
            animation: yun1 2s linear infinite alternate;
        }
 
        span:nth-child(2) {
            margin-top: 100px;
            margin-left: 400px;
            /* 对单个图片实现效果 */
            animation: yun2 2s linear infinite alternate;
        }
 
        span:nth-child(3) {
            margin-top: 170px;
            margin-left: -450px;
            /* 对单个图片实现效果 */
            animation: yun3 1s linear infinite alternate;
        }
 
        span:nth-child(4) {
            margin-top: 330px;
            margin-left: -360px;
            /* 对单个图片实现效果 */
            animation: san 2s linear infinite alternate;
        }
 
        span:nth-child(5) {
            margin-top: 110px;
            margin-left: 120px;
            /* 对单个图片实现效果 */
            animation: lu 1s linear infinite alternate;
        }
 
        @keyframes yun1 {
            100% {
                /* 水平平移 */
                transform: translateX(100px)
            }
        }
 
        @keyframes yun2 {
            100% {
                /* 水平平移 */
                transform: translateX(-50px)
            }
        }
 
        @keyframes yun3 {
            100% {
                /* 水平平移 */
                transform: translateX(-100px)
            }
        }
 
        @keyframes san {
            100% {
                /* 垂直平移 */
                transform: translateY(-100px)
            }
        }
 
        @keyframes lu {
            100% {
                /* 垂直平移 */
                transform: translateY(-50px)
            }
 
        }
 
        @keyframes wenzi {
            0% {
                /* 在原位置沿Y轴旋转缩放 */
                transform: translate(-50%, -50%) rotateZ(0deg) scale(1.5);
            }
 
            100% {
                transform: translate(-50%, -50%) rotateZ(360deg) scale(1);
            }
        }
 
        .dazi {
            position: absolute;
            top: 50%;
            left: 50%;
            /* 使图片在屏幕中间 */
            transform: translate(-50%, -50%);
            /* 使用背景图调整大小和位置 方便不失真 */
            background: url(./images/dazi.png) no-repeat center;
            background-size: cover;
            width: 470px;
            height: 200px;
            animation: wenzi 2s;
        }
    </style>