20231103-黑马web进阶-动画

文章目录

动画的实现步骤
动画属性
多组动画
案例-走马灯

动画的实现步骤

1、定义动画

@keyframes 动画名称{
	from{}
	to{}
}

@keyframes 动画名称{
	0%{}
	50%{}
	100%{}
}
1
2
3
4
5
6
7
8
9
10

2、使用动画

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

3、案例

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: cadetblue;
      animation: change 1s;
    }

    @keyframes change {
      from {
        width: 200px;
      }

      to {
        width: 800px;
      }
    }
  style>
head>

<body>
  <div class="box">div>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

动画属性

animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态;
注意：
①动画名称和动画时长必须赋值
②取值不分先后顺序
③如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

无限循环：animation: change 1s infinite;
动画方向：animation: change 1s alternate;
执行完毕时状态：animation: change 1s backwards;（默认值，动画停留在开始状态）（forwards，动画停留在结束状态）

animation拆分写法：
动画名称：animation-name
动画时长：animation-duration
延迟时间：animation-delay
动画执行完毕时状态：animation-fill-mode（backwards：第一帧状态，forwards：最后一帧状态）
速度曲线：animation-timing-function（steps(数字)：逐帧动画）
重复次数：animation-iteration-count（infinite为无限循环）
动画执行方向：animation-direction（alternate为反向）
暂停动画：animation-play-state（paused为暂停，通常配合:hover使用）

多组动画

animation:动画1,动画2,动画n;

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>逐帧多组动画title>
  <style>
    .box {
      width: 128px;
      height: 128px;
      /* border: 1px solid black; */
      background-image: url(../images/Jump.png);
      animation:
        /* 10：精灵小图的个数 */
        jump 1s steps(10) infinite,
        move 10s linear forwards;
    }

    @keyframes jump {
      /* 动画的开始状态和盒子的默认样式相同的，可以省略开始状态的代码 */
      /* from {
        background-position: 0 0;
      } */

      to {
        /* 精灵图的宽度 */
        background-position: -1280px 0;
      }
    }

    @keyframes move {
      /* from {
        transform: translateX(0);
      } */

      to {
        transform: translateX(800px);
      }
    }
  style>
head>

<body>
  <div class="box">div>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

案例-走马灯

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>走马灯title>
  <style>
    /* 设置页面的默认边距和内边距为0 */
    * {
      margin: 0;
      padding: 0;
    }

    /* 移除列表项的默认样式，去掉默认的圆点标记 */
    li {
      list-style: none;
    }

    .box {
      width: 721.2px;
      height: 135.2px;
      border: 5px solid black;
      margin: 300px auto;
      overflow: hidden;
    }

    .box ul li img {
      height: 135.2px;
      width: 240.4px;
    }

    .box ul {
      width: 1923.2px;
      /* 设置动画效果：move，持续时间为5秒，线性过渡，无限循环播放 */
      animation: move 5s linear infinite;
    }

    /* 图片列表项样式，使图像以水平方向浮动排列 */
    .box ul li {
      float: left;
    }

    @keyframes move {
      to {
        /* 图片列表项向左平移1202px，实现走马灯效果 */
        transform: translateX(-1202px);
      }
    }

    /* 鼠标悬停时暂停动画 */
    .box:hover ul {
      animation-play-state: paused;
    }
  style>
head>

<body>
  <div class="box">
    <ul>
      <li><img src="../images/10.jpg" alt="">li>
      <li><img src="../images/11.jpg" alt="">li>
      <li><img src="../images/12.jpg" alt="">li>
      <li><img src="../images/13.jpg" alt="">li>
      <li><img src="../images/14.jpg" alt="">li>

      <li><img src="../images/10.jpg" alt="">li>
      <li><img src="../images/11.jpg" alt="">li>
      <li><img src="../images/12.jpg" alt="">li>
    ul>
  div>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

相关阅读:
C#使用OpenCv（OpenCVSharp）图像直方图均衡化处理实例
 汽车电子行业常见工具方法汇总
 计算机毕业设计Java护肤品购物系统(源码+系统+mysql数据库+lw文档)
windows安装mysql时卡write configuration file曲线救国 mysql 5.7.39 免安装(ZIP压缩包)版本安装配置
 漏洞修复实用指南
 头歌：集合——课上练
 python代码小tips-从HTML字符串中提取文本内容并去掉标签
 请求地址‘/operlog‘,发生未知异常
 Appium和Android常用9种自动化测试框架对比有哪些优势？
webpack简介
原文地址：https://blog.csdn.net/qq_44887198/article/details/134195141