前端自学笔记4：动画

HZWANG30

已于 2023-06-28 21:26:16 修改

阅读量82

点赞数

分类专栏：前端自学笔记文章标签：前端笔记动画

于 2023-04-21 20:56:40 首次发布

本文链接：https://blog.csdn.net/qq_44986029/article/details/130254126

版权

前端自学笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章目录

1、动画的实现步骤

定义动画：

@keyframes 动画名称 {
	form {}
	to {}
}
或者
@keyframes 动画名称 {
	0% {}
	10% {}
	15% {}
	100% {}
}

使用动画：

animation: 动画名称 动画花费时长;

代码示例：

<!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>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            animation: change1 2s;
            /* animation: change2 2s; */
        }
        @keyframes change1 {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
        @keyframes change2 {
            0% {
                width: 100px;
            }
            50% {
                width: 200px;
                height: 200px;
            }
            100% {
                width: 250px;
                height: 300px;
            }
        }    
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

change1效果：
在这里插入图片描述
change2效果：

2、animation属性：

复合写法：animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态；（前两个属性必须有）

单独写法：

animation-name: 动画名称；
animation-duration：动画时长；
animation-delay：延迟时间；
（如果有两个时间值，那么第一个表示动画时长、第二个表示延迟时间）。
animation-timing-function：速度曲线取值例如：linear表示匀速、steps(整数)表示分步动画；
animation-iteration-count：重复次数：取值为整数，刷新后动画重复几次。
（设置无限循环：animation：infinite；）
animation-direction：动画方向；取值：alternate表示从初始状态到终止状态，再从终止状态返回初始状态。
alternate的作用效果：
在这里插入图片描述
animation-fill-mode：执行完毕时状态（不能加infinite和alternate属性）：取值有backwards(默认属性)、forwards(停留在结束的状态)。
animation-play-state:暂停动画；paused为暂停，通常配合hover使用。

3、实现逐帧动画（配合精灵图实现）

1、准备显示区域，区域的大小等于精灵图一张小图的尺寸；
（这里整张精灵图1680px140px，则精灵小图大小：140px140px）
2、定义动画：改变背景图的位置；
3、使用动画。逐帧显示用steps(12),显示12张小图。
精灵图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      /* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
      width: 140px;
      height: 140px;
      border: 1px solid #000;
      background-image: url(./images/bg.png);
      animation: move 3s steps(12) infinite;
    }
    @keyframes move {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -1680px 0;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

效果：
在这里插入图片描述

4、多组动画

首先定义多组动画，然后使用时：

animation :动画名1 时间 ... , 动画名2 时间 ...;

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      /* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);
      animation: 
      move 3s steps(12) infinite, run 3s linear forwards;
    }
    @keyframes move {
      /* from {
        background-position: 0 0;
      } */
      to {
        background-position: -1680px 0;
      }
    }
    @keyframes run {
      /* from {
        transform: translateX(0);
      } */
      to {
        transform: translateX(800px);
      }
    }

  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

效果：
在这里插入图片描述

5、走马灯效果

将7张图片在一个可视区域流动显示。（可视区域宽度为三张图片大小）
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 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 infinite linear;
      }
      .box li {
        float: left;
      }
      @keyframes move {
        to {
          transform: translateX(-1400px);
        }
      }
      .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>
        /*这里多放三张图是为了在最后三张图向左要漏出空白时补上，让动画回到初始状态*/
        <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>

6、案例

包含知识点：
background-size: contain; 将背景图的长或宽铺满父级的长或宽，等比例缩放，可能会留白；
效果
在这里插入图片描述
background-size：cover ；将背景图完全覆盖盒子，等比例缩放，但是可能图片会显示不完全；
效果：

案例最终效果：

代码

<!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="lu">
        <img src="./images/lu.png" alt="">
    </div>
    <div class="title">
        <img src="./images/font1.png" alt="">
    </div>

    <div class="biao">
        <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>

css文件

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    background: url(../images/f1_1.jpg) no-repeat center 0;
    background-size: cover;
    position: relative;
}
.cloud img {
    position: absolute;
    left: 50%;
    top: 0;
}
.cloud img:first-child {
    margin-left: -290px;
    margin-top: 20px;
    animation: cloud 1s infinite alternate;
}
.cloud img:nth-child(2) {
    margin-left: 400px;
    margin-top: 100px;
    animation: cloud 1s infinite alternate 0.2s;
}
.cloud img:nth-child(3) {
    margin-left: -550px;
    margin-top: 200px;
    animation: cloud 1s infinite alternate 0.4s;
}
@keyframes cloud {
    to {
        transform: translateX(20px);
    }
}
.san {
    position: absolute;
    top: 170px;
    left: 324px;
    animation: san 1s infinite alternate ;
}
.title {
    position: absolute;
    top: 280px;
    left: 400px;
}
.lu {
    position: absolute;
    top: 120px;
    right:345px;
}
@keyframes san {
    to {
        transform: translateY(-20px);
    }
}
.biao {
    position: absolute;
    top: 670px;
    left: 250px;

}
.biao img {
    margin-left: 75px;
}
@keyframes biao {
    to {
        transform: translateY(-30px);
    }
}
.biao img:nth-child(1) {
    animation: biao 1s infinite alternate;
}
.biao img:nth-child(2) {
    animation: biao 1s infinite alternate 0.2s;
}
.biao img:nth-child(3) {
    animation: biao 1s infinite alternate 0.4s;
}
.biao img:nth-child(4) {
    animation: biao 1s infinite alternate 0.6s;
}

HZWANG30

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端自学笔记4：动画

animation-fill-mode：执行完毕时状态（不能加infinite和alternate属性）：取值有backwards(默认属性)、forwards(停留在结束的状态)。animation-timing-function：速度曲线取值例如：linear表示匀速、steps(整数)表示分步动画；animation-iteration-count：重复次数：取值为整数，刷新后动画重复几次。/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */2、定义动画：改变背景图的位置；
复制链接

扫一扫