HTML全民出游动画：素材加步骤详解！！

最新推荐文章于 2024-09-30 21:15:00 发布

Hello!obsessive

最新推荐文章于 2024-09-30 21:15:00 发布

阅读量203

点赞数 3

文章标签： html5

本文链接：https://blog.csdn.net/jbc1346/article/details/141303129

版权

1.首先要创建好相关的文件，一个css，一个images,一个index.html（图片素材放在文章末尾）

2.index.html的部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全民出游</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- yun -->
     <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="lu">
         <img src="./images/lu.png" alt="">
       </div>
    <!-- 大号字体 -->
     <div class="zi">
        <img src="./images/font1.png" alt="">
     </div>

     <!-- 小号字体 -->
      <div class="xiao">
         <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>

3.index.css部分

* {
    margin: 0;
    padding: 0;
}

/* 大背景 */
body {
    /* height: 100%; */
    background: url(../images/bgc.png)  no-repeat center 0;
    background-size: cover;
}

/* html是body的爹  */
html {
    height: 100%;
}

/* 云彩 */
.cloud img {
    position: absolute;
    left: 50%;
   margin: 0 auto;
    animation: cloud 1s infinite alternate linear;
}

/* 第一个云 */
.cloud img:nth-child(1) {
  
   margin-left: -250px;
    top: 20px;
    animation: cloud 1s infinite alternate linear ;
}
/* 第二个云 */
.cloud img:nth-child(2) {
    margin-left: 400px;
    top: 100px;
    animation: cloud 1s infinite alternate linear 0.4s;
}

/* 第三个云 */
.cloud img:nth-child(3) {
    margin-left: -550px;
    top: 200px;
    animation: cloud 1s infinite alternate linear 0.6s;
}

/* 定义云彩的动画 */
@keyframes cloud {
    100% {
        transform: translate(20px);
    }
}

/* 热气球 */
.san img {
    position: absolute;
    left: 50%;
    margin-left: -320px;
    top: 100px;
    animation: san 3s infinite  linear alternate ;
}
/* 伞动画效果 ：变为向下移动 */
@keyframes san {
    
    to {
        transform: translateY(-30px);
    }
}

/* 长颈鹿 */
.lu {
    position: absolute;
    margin-left: 870px;
    top: 70px;
   
}

/* 中间大号字体 */
.zi img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    animation: zi 1s;
}
    
/* 字体动画效果：默认到小-到大-小-默认 */
@keyframes zi {

    /* 在这里再写一遍translate(-50%,-50%)的原因是考虑到层叠性，防止下面的把上面覆盖掉 */
    0% {transform: translate(-50%,-50%) scale(1); }
    20%{transform: translate(-50%,-50%) scale(0.1);}
    40%{transform: translate(-50%,-50%) scale(1.4);}
    70%{transform: translate(-50%,-50%) scale(0.8);}
    100%{transform: translate(-50%,-50%) scale(1);}
}

/* 小号字体 */
.xiao img {
    position: absolute;
    left: 50%;
    bottom: 50px;
   width: 100px;
   height: 125px;
   
}
.xiao img:nth-child(1) {
    margin-left: -300px;
    animation: xiao 1s infinite alternate linear;
}
.xiao img:nth-child(2) {
    margin-left: -130px;
    animation: xiao 1s infinite alternate linear 0.6s;
}
.xiao img:nth-child(3) {
    margin-left: 40px;
    animation: xiao 1s infinite alternate linear 0.4s;
}
.xiao img:nth-child(4) {
    margin-left: 210px;
    animation: xiao 1s infinite alternate linear 1.2s;
}



/* 小号字体动画 */
@keyframes xiao {
    from {
        transform: translateY(-15px);
    }
    to {
        transform: translateY(20px);
    }
}

4.素材

通过网盘分享的文件：images
链接: https://pan.baidu.com/s/1xMllPCyuMdYmvhWua1bfLA?pwd=i87s 提取码: i87s