20231103-黑马web进阶-动画

文章目录

动画的实现步骤

1、定义动画

html 复制代码
@keyframes 动画名称{
	from{}
	to{}
}

@keyframes 动画名称{
	0%{}
	50%{}
	100%{}
}

2、使用动画

html 复制代码
animation:动画名称 动画花费时长;

3、案例

html 复制代码
<!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>

动画属性

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;

html 复制代码
<!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>

案例-走马灯

html 复制代码
<!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>
相关推荐
巴巴_羊21 分钟前
React Ref使用
前端·javascript·react.js
拾光拾趣录42 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃1 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军1 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子1 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游1 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子1 小时前
智能前端实践之 shot-word demo
前端
归于尽1 小时前
智能前端小魔术,让图片开口说单词
前端·react.js
用户9873824581011 小时前
vite 插件
前端
无数山1 小时前
autorelease pool
前端