Day02空间转换；动画

最新推荐文章于 2024-08-26 09:19:25 发布

瑜～

最新推荐文章于 2024-08-26 09:19:25 发布

阅读量34

点赞数

分类专栏：移动web 文章标签： html css

本文链接：https://blog.csdn.net/weixin_52284271/article/details/131802015

版权

移动web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

background-size:缩放背景图

空间转换

在这里插入图片描述
属性：transform
z轴正值指向屏幕外侧（用户），负值指向屏幕内侧

透视（perspective）：近大远小，近实远虚

在这里插入图片描述

在这里插入图片描述

了解

立体呈现
在这里插入图片描述

动画
在这里插入图片描述

重复次数无限循环：infinite;方向：alternate;停留在结束时的状态：forwards

            animation: change 2s steps(4) 2;
            /* 无限循环 */
            animation: change 2s infinite;
            /* 动画方向 */
            animation: change 2s infinite alternate;   
            /* 停留在最初状态 */
            animation: change 2s backwards;
           /* 动画停留在结束时的状态 */
           animation: change 2s forwards;

在这里插入图片描述

逐帧动画配合精灵图去使用

在这里插入图片描述
综合案例
走马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        img {
            width: 200px;
        }
        .box {
            width: 600px;
            height: 112px;
            border: 5px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        .box ul {
            width: 2000px;
            animation: move 5s linear infinite;
        }
        .box li {
            float: left;
        }
         /* 定义动画:位移, ul 左侧使用  x -1400  */
        @keyframes move {
            to {
                transform: translateX(-1400px);
            }
        }
        /* 用户鼠标移入box,动画暂停 */
        .box:hover ul {
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/6.jpg" alt=""></li>
            <li><img src="./images/7.jpg" alt=""></li>

            <!-- 第567移动的时候,显示区域不能留白 -->
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>

        </ul>
    </div>
</body>
</html>

综合案例2
全民出游

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全民出游</title>
    <link rel="stylesheet" href="./CSS/index.css">
    <style>

    </style>
</head>
<body>
    <!-- 云彩 -->
    <div class="cloud">
        <img src="./images/yun1.png" alt="">
        <img src="./images/yun2.png" alt="">
        <img src="./images/yun3.png" alt="">
    </div>
    <!-- 气球 -->
    <div class="ball">
        <img src="./images/san.png" alt="">
    </div>
    <!-- 促销活动 -->
    <div class="acti">
        <img src="./images/1.png" alt="">
        <img src="./images/2.png" alt="">
        <img src="./images/3.png" alt="">
        <img src="./images/4.png" alt="">
    </div>
</body>
</html>

全民出游样式表

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    height: 100%;
    background: url(../images/f1_1.jpg) no-repeat center 0;

     /* 缩放背景图 */

    /* 图片等比例缩放, 当宽度或高度和盒子尺寸相等, 图片就不再缩放 */
    /* background-size: contain; */

    /* 图片等比例缩放, 图片完全覆盖到整个盒子, 可能会导致图片显示不全 */
    background-size: cover;
}


/* 
1. img 引入图片, 控制位置
2. 定义动画,使用动画
*/

.cloud img {
    position: absolute;
    left: 50%;
    top: 0;
    /* infinite:一直重复   alternate:反向 */
}
.cloud :nth-child(1) {
    margin-left: -300px;
    top: 20px;
    animation: cloud 1s infinite alternate;
}
.cloud :nth-child(2) {
    margin-left: 400px;
    top: 100px;
    animation: cloud 1s infinite alternate 0.2s;
}
.cloud :nth-child(3) {
    margin-left: -550px;
    top: 200px;
    animation: cloud 1s infinite alternate 0.4s;
}

/* 云彩动画 */
@keyframes cloud {
    to {
        transform: translateX(20px);
    }
    
}


/* 气球 */
.ball img {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -314px;
    margin-top: 58px;
    animation: ball 1s infinite alternate linear;
}
/* 气球动画 */
@keyframes ball {
    to {
        transform: translateY(30px);
    }
    
}


/* 促销活动 */
.acti img {
    position: absolute;
    left: 50%;
    top: 0;
}
.acti :nth-child(1) {
    margin-left: -300px;
    margin-top: 490px;
    animation: acti 1s infinite alternate linear;
}
.acti :nth-child(2) {
    margin-left: -150px;
    margin-top: 490px;
    animation: acti 1s infinite alternate 0.4s linear;
}
.acti :nth-child(3) {
    margin-left: 10px;
    margin-top: 490px;
    animation: acti 1s infinite alternate 0.8s linear;
}
.acti :nth-child(4) {
    margin-left: 160px;
    margin-top: 490px;
    animation: acti 1s infinite alternate 1.2s linear;
}
/*  促销活动动画 */
@keyframes acti {
    to {
        transform: translateY(-30px);
    }
}