day02-移动web(动画)

Willa25

已于 2022-05-01 15:39:48 修改

阅读量231

点赞数

分类专栏：移动web 文章标签： css

于 2022-04-26 01:26:19 首次发布

本文链接：https://blog.csdn.net/qq_52982670/article/details/124417708

版权

移动web 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

动画

@[TOC](动画)

一、动画
1.1 动画属性
1.2 动画实现步骤
使用步骤：

1.3 动画实现步骤-百分比写法
1.4 使用动画的三个注意事项
1.5 animation复合属性
1.6 精灵动画
1.7 精灵动画-时钟效果

二、走马灯案例

一、动画

目标：使用animationt添加动画效果
作用：实现多个状态的变化，并且过程可控（重复播放、交替播放、暂停）
css属性：animation
快捷键：an

1.1 动画属性

目标1：使用animation相关属性控制动画执行过程
目标2：使用steps实现逐帧动画

1.2 动画实现步骤

使用步骤：

1. 定义动画

写法：
1. @keyframes 动画名称 { from{} to{}}
2.👍: @keyframes 动画名称 { 0%{} 50%{} 100%{}}
3. 快捷键: @key
4. 区别：from to 只能定义两个状态的变化。百分比可以定义多个状态间的变化
推荐👍：常省略from 和 0%

2. 调用动画

写法：
1.复合属性：animation: 动画名称持续时间延迟时间速度曲线最后的状态重复次数执行方法
2.关键的单词：🔔
infinite 无限次数播放
alternate 交替播放
infinite 重复次数
linear 匀速播放
steps(N) 逐帧动画，又叫分步动画，常和精灵图配合做逐帧动画
forwards 停在最终的状态
paused 暂停，常和hover配合做暂停动画
✨注意事项：
1. 复合属性的位置可以任意调换
2. infinite （重复）和forward（停在最终状态）不能同时使用
3. 动画名称、动画时长不能省略。其它的都可以省略
4. 如果只有一个时间，表示动画时长；如果有两个时间，第一个表示（动画）持续时间，第二个代表延迟时间

  /* 目标：添加动画，让宽度从200变大到800 */
    .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;
      /* 2. 使用动画 快捷an*/
      /* 动画时间不能省略，否则跑不起来 */
      animation: move 2s;
    }
    /* 1.定义动画 快捷键@key*/
    /* 中文也能跑，但是不推荐 写法很low*/
    @keyframes move {
      /* 定义初始状态 */
      from {
        width: 200px;
      }
      /* 定义最终状态 */
      to {
        width: 800px;
         background-color: pink;
      }
    }

效果：

注意：默认动画后自动回到初始状态

1.3 动画实现步骤-百分比写法

作用：可以定义多个状态的变化
取值：百分比是按时间长度取值： 0-100可以任意分配值
注意：

0%等同于from，代表初始状态
100%等同于to，代表最终状态

    /* 目标：添加动画，让宽度从200*100 到 500*300，再到 800*500 */
    /* 区别：1.  from 到同只能定义两种状态，2.  百分比可以自定义多种状态 */
    .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;
      /*2.  使用动画 */
      animation: move 3s;
    }
    /* 1.定义动画 */
    @keyframes move {
      /* 0&等同于from 代表初始状态 */
      0% {
        width: 200px;
        height: 100px;
      }
      10% {
        width: 300px;
        height: 200px;
      }
      20% {
        width: 500px;
        height: 400px;
      }
      /* 百分比是按照时间长度取值的：0-100可以任意取值 */
      50% {
        width: 600px;
        height: 100px;
      }
      /* 100% 等同于to 代表最终状态 */
      100% {
        width: 100px;
        height: 50px;
      }
    }

1.4 使用动画的三个注意事项

注意事项：
1. 动画名称不能重复，否则会产生覆盖效果
2. 大部分的CSS属性都可以使用动画
3. from与0%常常省略，代表从初始状态0%开始

 注意事项：
        1. 动画名称不能重复，佛否则会产生覆盖效果
        2. 大部分的CSS属性都可以 使用动画
        3. from与0%常常省略，代表从初始状态0%开始 -->
  <style>
    /* 目标：添加动画，让宽度从200变大到600 */
    .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;
      /* 2. 使用动画 快捷an*/
      /* 动画时间不能省略，否则跑不起来 */
      animation: move 2s;
    }
    /* 1.定义动画 快捷键@key*/
    /* 中文也能跑，但是不推荐 */
    @keyframes move {

      /* 写法一 可以定义多种状态，取值0-100*/
      0% {
        width: 200px;
        background-color: lime;
      }
      100% {
        width: 300px;
        background-color: orange;
      }
      /* 写法二 只能定义两种状态*/
      /* 定义初始状态 初始状态一般可以省略*/
      from {
        width: 200px;
        background-color: skyblue;
      }
      /* 定义最终状态 */
      to {
        width: 500px;
        height: 200px;
        background-color: pink;
        border-radius: 50%;
      }
    }

1.5 animation复合属性

✨注意事项：

复合属性的位置可以任意调换
名称和持续事件，不可省略其它的都可以
forwards 和 infinite不能同时使用
如果有两个时间，第一个代表持续时间，第二个代表延迟

  .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;
      /* 速度曲线：linear 代表匀速运动 */
      /*          steps(4) 代表分步变化 */
      /* 延迟时间：默认立即开始动画，延迟时间代表，多少秒后开始动画 */
      /* 重复次数：infinite 无限次数播放 */
      /* 动画方向： alternate 动画执行到100后，再从100%执行到0%。 */
      /* 最后的状态：forwards 停在最终的状态中 */

      animation: move 4s steps(4);


      /* 
        💥注意事项：
        1. 复合属性的位置可以任意调换
        2. 名称和持续事件，不可省略其它的都可以
        3. forwards 和 infinite不能同时使用
        4. 如果有两个时间，第一个代表持续时间，第二个代表延迟时间。如果只要一个时间，代表动画时长
      */
    }
    .box:hover {
      animation-play-state: paused;
    }

    @keyframes move {
      to {
        background-color: pink;
        border-radius: 50px;
        width: 800px;
        height: 500px;
      }
    }

1.6 精灵动画

注意：多个动画用同一个animation属性时，动画之间用逗号隔开即可

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      width: 140px;
      height: 140px;
      background: url(./images/bg.png) 0 0;

      /* 💥 多个动画用同一个animation，动画之间用逗号隔开即可 */
      animation: move 1s steps(12) infinite, run 2s linear forwards;
    }

    @keyframes move {
      to {
        /* background-position: -1680px 680px; */
        background-position: -1680px 0;
      }
    }

    @keyframes run {
      to {
        transform: translateX(800px);
        
      }
    }

1.7 精灵动画-时钟效果

   <style>
        .clock {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 8px solid #000;
            border-radius: 50%;
        }

        /* 刻度线 */
        .line {
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            width: 3px;
            height: 200px;
            background-color: #ccc;
        }

        /* :nth-child() */
        .line:nth-child(2) {
            transform: translate(-50%) rotate(30deg);
        }

        .line:nth-child(3) {
            transform: translate(-50%) rotate(60deg);
        }

        .line:nth-child(4) {
            transform: translate(-50%) rotate(90deg);
        }
        .line:nth-child(5) {
            transform: translate(-50%) rotate(120deg);
        }
        .line:nth-child(6) {
            transform: translate(-50%) rotate(150deg);
        }

        /* 遮罩层 */
        .mask {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 140px;
            height: 140px;
            background-color: #fff;
            border-radius: 50%;
        }

        /* 表针 */
        .hour,
        .minute,
        .second {
            position: absolute;
            left: 50%;
            bottom: 50%;
            /* transform: translate(-50%); */
            transform-origin: center bottom;
        }

        .hour {
            width: 6px;
            height: 40px;
            background-color: #000;
            transform: translate(-50%) rotate(45deg);
        }

        .minute {
            width: 4px;
            height: 50px;
            background-color: #000;
            transform: translate(-50%) rotate(90deg);
        }

        .second {
            width: 2px;
            height: 60px;
            background-color: red;
            transform: translate(-50%) rotate(225deg);
            animation: rotate 60s steps(60) infinite;
        }

        /* 螺丝 */
        .dotted {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 12px;
            height: 12px;
            background-color: #000;
            border-radius: 50%;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="clock">
        <!-- 刻度线 -->
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>

        <!-- 遮罩层 -->
        <div class="mask"></div>

        <!-- 表针 -->
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>

        <!-- 螺丝 -->
        <div class="dotted"></div>
    </div>
</body>

二、走马灯案例

  <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        width: 620px;
        border: 10px solid #000;
        /* 溢出隐藏 */
        overflow: hidden;
      }
      ul {
        width: 2000px;
        /* 清除浮动 */
        overflow: hidden;

        /* 2.调用动画 */
        animation: move 5s infinite linear;
      }
      li {
        list-style: none;
        float: left;
      }
      .box img {
        width: 200px;
        vertical-align: middle;
      }

      /* 1.定义动画 */
      @keyframes move {
        to {
          transform: translateX(-1400px);
        }
      }

      .box:hover ul {
        animation-play-state: paused;
      }
    </style>

  <body>
    <div class="box">
      <!-- ul>li*7>img[src="./images/$.jpg"] -->
      <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>

Willa25

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day02-移动web(动画)

动画@[TOC](动画)一、动画1.1 动画属性1.2 动画实现步骤使用步骤：1.3 动画实现步骤-百分比写法1.4 使用动画的三个注意事项1.5 animation复合属性1.6 精灵动画1.7 精灵动画-效果1.8 精灵动画-时钟效果二、走马灯案例总结一、动画目标：使用animationt添加动画效果作用：实现多个状态的变化，并且过程可控（重复播放、交替播放、暂停）css属性：animation快捷键：an1.1 动画属性目标1：使用animation相关属性控制动画执行过程目标
复制链接

扫一扫