CSS --- 动画练习

虾小眠0526

已于 2023-03-19 20:02:56 修改

阅读量242

点赞数

分类专栏：前端学习之旅文章标签： css css3 动画

于 2023-03-16 20:18:11 首次发布

本文链接：https://blog.csdn.net/weixin_58470558/article/details/129597852

版权

前端学习之旅专栏收录该内容

60 篇文章 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>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</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="san">
        <img src="./images/san.png" alt="">
    </div>
    <!-- 鹿和字 -->
    <div class="center">
        <img src="./images/lu.png" alt="">
        <img src="./images/font1.png" alt="">
    </div>
    <!-- 折扣图片 -->
    <div class="zhekou">
        <img src="./images/1.png" alt="">
        <img src="./images/2.png" alt="">
        <img src="./images/3.png" alt="">
        <img src="./images/4.png" alt="">
</body>
</html>

* {
    margin: 0;
    padding: 0;
}
/*  html和body的高度必须都写上  */
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;
}

.cloud img:nth-child(1) {
    margin-left: -300px;
    top: 20px;
    animation: cloud 1s infinite alternate;
}
.cloud img:nth-child(2) {
    margin-left: 400px;
    top: 100px;
    animation: cloud 1s infinite alternate 0.2s;
}
.cloud img:nth-child(3) {
    margin-left: -550px;
    top: 200px;
    animation: cloud 1s infinite alternate 0.4s;
}

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

/* 伞的设置 */

.san img{
    position: absolute;
    left: 50%;
    margin-left: -330px;
    top: 90px;
    animation: san 2s infinite alternate; 
}
/* 伞动画 */
@keyframes san {
    to{
        transform: translateY(20px);
    }
}


/* 中间设置 */
.center img{
    position: absolute;
    left: 50%;
    top: 0;
}
.center img:nth-child(1){
    margin-left: 90px;
    top: 100px;
    transform: scale(0.7);
}
.center img:nth-child(2){
    margin-left: -325px;
    top: 230px;
    transform: scale(0.8);
}



/* 折扣设置 */
.zhekou img{
    position: absolute;
    left: 50%;
    bottom: 0;
}

.zhekou img:nth-child(1){
    margin-left: -350px;
    bottom: 60px;
    animation: zhekou 2s infinite alternate;
}
.zhekou img:nth-child(2){
    margin-left: -180px;
    bottom: 60px;
    animation: zhekou 2s infinite alternate 0.2s;
}
.zhekou img:nth-child(3){
    margin-left: -10px;
    bottom: 60px;
    animation: zhekou 2s infinite alternate 0.4s;
}
.zhekou img:nth-child(4){
    margin-left: 160px;
    bottom: 60px;
    animation: zhekou 2s infinite alternate 0.4s;
}
/* 折扣动画 */
@keyframes zhekou {
    to{
        transform: translateY(20px);
    }
}