移动Web-动画

1、动画-animation

过渡:实现两个状态间的变化过程

动画:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)

 1.1 实现步骤

1.1.1 定义动画

1.1.2 使用动画

<!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: change 1s;
      }

      /* 动画一:宽度从200变化到800 */
      /* @keyframes change {
        from {
            width: 200px;
        }
        to {
            width: 800px;
        }
      } */


      /* 动画二:从 200*100 变化到 300*300 变化到800*500 */
      /* 百分比:表示的意思是动画时长的百分比 */
      @keyframes change {
        0% {
            width: 200px;
            height: 100px;
        }
        20% {
            width: 300px;
            height: 300px;
        }
        100% {
            width: 800px;
            height: 500px;
        }
      }

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

2、animation属性

提示:

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间

2.1 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>animation复合属性</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;

        /* linear:匀速 */
        animation: change 1s linear;

        /* steps:分步动画,工作中,配合精灵图实现精灵动画 */
        animation: change 1s steps(3);

        /* 如果有两个时间,第一个是动画时长,第二个是延迟时间 */
        animation: change 1s 2s;

        /* 重复次数,infinite:无限循环 */
        animation: change 1s 3;
        animation: change 1s infinite;

        /* alternate:反向 */
        animation: change 1s infinite alternate;

        /* 动画执行完毕时的状态, forwards:结束状态; backwards:开始状态(默认) */
        animation: change 1s forwards;
        animation: change 1s backwards;
      }

      /* 宽度 从 200 变化到 800 */
      @keyframes change {
        from {
            width: 200px;
        }
        to {
            width: 800px;
        }
      }

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

2.2 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>animation拆分写法</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;
        
        /* 动画名称 */
        animation-name: change;
        /* 动画时长 */
        animation-duration: 1s;
        /* 播放次数 */
        animation-iteration-count: infinite;

        /* animation-play-state: paused; */
      }

      .box:hover {
        /* 暂停动画 */
        animation-play-state: paused;
      }


      /* 宽度从 200 变化到 800 */
      @keyframes change {
        0% {
            width: 200px;
        }
        100% {
            width: 800px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

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>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }

      img {
        display: block;
        width: 200px;
      }
      
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }

      .box ul {
        display: flex;
        animation: move 6s infinite linear;
      }

      /* 定义位移动画;ul使用动画;鼠标悬停暂停动画 */
      @keyframes move {
        0% {
          transform: translate(0);
        }
        100% {
          transform: translate(-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>

4、动画-逐帧动画

核心原理:

  1. steps()逐帧动画
  2. CSS精灵图

精灵动画制作步骤

  1. 准备显示区域
    • 盒子尺寸与一张精灵小图尺寸相同
  2. 定义动画
    1. 移动背景图(移动距离=精灵图宽度)
  3. 使用动画
    1. steps(N),N与精灵小图个数相同
<!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>
    div {
      width: 140px;
      height: 140px;
      border: 1px solid #000;
      background-image: url(./images/bg.png);
      animation: run 1s steps(12) infinite;
    }

    @keyframes run {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -1680px 0;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

 5、动画-多组动画

<!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>
    div {
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);
      animation: 
        run 1s steps(12) infinite,
        move 3s forwards
      ;
    }

    /* 当动画的开始状态样式 跟 盒子默认样式相同,可以省略动画开始状态的代码 */
    @keyframes run {
      /* from {
        background-position: 0 0;
      } */
      to {
        background-position: -1680px 0;
      }
    }

    @keyframes move {
      /* 0% {
        transform: translate(0);
      } */
      100% {
        transform: translate(800px);
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/359228.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

备战蓝桥杯---数据结构与STL应用(入门2)

话不多说&#xff0c;直接看题&#xff1a; 前4个操作我们可以用deque解决&#xff0c;第5个我们不用真的去反转&#xff0c;调换一下头尾即可。 下面是AC代码&#xff1a; #include<bits/stdc.h> using namespace std; int n,m,k,k1,ee0; bool cm1(int a,int b){retur…

C++ 数论相关题目 博弈论:拆分-Nim游戏

给定 n 堆石子&#xff0c;两位玩家轮流操作&#xff0c;每次操作可以取走其中的一堆石子&#xff0c;然后放入两堆规模更小的石子&#xff08;新堆规模可以为 0 &#xff0c;且两个新堆的石子总数可以大于取走的那堆石子数&#xff09;&#xff0c;最后无法进行操作的人视为失…

网络安全从入门到精通(超详细)学习路线

首先看一下学网络安全有什么好处&#xff1a; 1、可以学习计算机方面的知识 在正式学习网络安全之前是一定要学习计算机基础知识的。只要把网络安全认真的学透了&#xff0c;那么计算机基础知识是没有任何问题的&#xff0c;操作系统、网络架构、网站容器、数据库、前端后端等…

GitCode|部分项目开源代码

1.EasyKeyboard 基于MFC的简单软键盘&#xff0c;使用vs2017开发 PangCoder / EasyKeyboard GitCode基于Windows平台的软键盘&#xff0c;使用VS2017开发&#xff0c;使用MFC框架https://gitcode.net/qq_36251561/easykeyboard 2.EncoderSimulator 基于WPF应用的编码器模拟工…

MySQL行格式原理深度解析

MySQL中的行格式&#xff08;Row Format&#xff09;是指存储在数据库表中的数据的物理格式。它决定了数据是如何在磁盘上存储的&#xff0c;以及如何在查询时被读取和解析的。MySQL支持多种行格式&#xff0c;每种格式都有其特定的优点和适用场景。 提升编程效率的利器: 解析…

正则表达式补充以及sed awk

正则表达式&#xff1a; 下划线算 在单词里面 解释一下过程&#xff1a; 在第二行hello world当中&#xff0c;hello中的h 与后面第一个h相匹配&#xff0c;所以hello中的ello可以和abcde匹配 在world中&#xff0c;w先匹配h匹配不上&#xff0c;则在看0&#xff0c;r&#…

Linux网络编程——网络套接字初识

文章目录 1. IP地址2. 端口号3. 初识TCP协议 && UDP协议4. 网络字节序5. socket创建API 1. IP地址 举个例子&#xff1a; 《西游记》中&#xff0c;唐僧要去取件&#xff0c;总是说从“东土大唐”来&#xff0c;前往“西天”拜佛求经&#xff0c;从哪里来&#xff0c;…

js数组/对象的深拷贝与浅拷贝

文章目录 一、js中的深拷贝和浅拷贝二、浅拷贝1、Object.assign()2、利用es6扩展运算符&#xff08;...&#xff09; 二、深拷贝1、JSON 序列化和反序列化2、js原生代码实现3、使用第三方库lodash等 四、总结 一、js中的深拷贝和浅拷贝 在JS中&#xff0c;深拷贝和浅拷贝是针对…

网络和Linux网络_15(IO多路转接)reactor编程_服务器+相关笔试题

目录 1. reactor的服务器 1.1 Sock.hpp 1.2 加协议分割报文 1.3 序列化和反序列化 Protocol.hpp main.cc Epoll.hpp TcpServer.hpp 2. 相关笔试题 答案及解析 本篇完。 1. reactor的服务器 Log.hpp和以前一样&#xff0c;因为下面要写ET模式所以Sock.hpp加了一个把…

【架构论文】SCALE: Secure and Scalable Cache Partitioning(2023 HOST)

SCALE: Secure and Scalable Cache Partitioning 摘要 LLC可以提高性能&#xff0c;但是会引入安全漏洞&#xff0c;缓存分配的可预测变化可以充当侧信道&#xff0c;提出了一种安全的缓存分配策略&#xff0c;保护缓存免受基于时间的侧信道攻击。SCALE使用随机性实现动态可扩…

【ArcGIS微课1000例】0098:查询河流流经过的格网

本实验讲述,ArcGIS中查询河流流经过的格网,如黄河流经过的格网、县城、乡镇、省份等。 文章目录 一、加载数据二、空间查询三、结果导出四、注意事项一、加载数据 加载实验配套数据0098.rar中的河流(黄河)和格网数据,如下图所示: 接下来,将查询河流流经过的格网有哪些并…

乔拓云教育系统:打造培训机构全面数字化转型新篇章

在当今数字化、信息化高速发展的时代&#xff0c;教育培训机构也需要与时俱进&#xff0c;借助先进的管理工具提升运营效率&#xff0c;优化学员学习体验。乔拓云教育系统正是这样一个全面、高效、一站式的解决方案&#xff0c;为教育培训机构提供强大的技术支持和全方位的服务…

微信扫码登录流程

微信官方文档使用 搜索“微信开放平台”点击导航栏的“资源中心”点击“网站应用”下的“微信登录功能”地址微信扫码登录是基于OAuth2的&#xff0c;所以需要第三方应用&#xff08;就是实现微信扫码登录的应用&#xff09;成为微信的客户端&#xff0c;获取AppId和AppSecret…

聊聊java中的Eureka和Nacos

本文主要来自于黑马课程中 1.提供者与消费者 在服务调用关系中&#xff0c;会有两个不同的角色&#xff1a; 服务提供者&#xff1a;一次业务中&#xff0c;被其它微服务调用的服务。&#xff08;提供接口给其它微服务&#xff09; 服务消费者&#xff1a;一次业务中&#xff0…

第九节HarmonyOS 常用基础组件20-Divider

1、描述 提供分割器组件&#xff0c;分割不同内容块或内容元素。 2、接口 Divider() 3、属性 名称 参数类型 描述 vertical boolean 使用水平分割线还是垂直分割线。 false&#xff1a;水平分割线 true&#xff1a;垂直分割线 color ResourceColor 分割线颜色 默认…

c++的发展史、缺省参数、命名空间你了解吗?

1.c的发展历史概述 1.1.什么是c C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的 程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适。为了解决软件危机&#xff0c; 20世纪80年代&#xff0c; 计算机…

Java 面向对象进阶 01(黑马)

static案例代码&#xff1a; 代码&#xff1a; public class Student {private String gender;private String name;private int age;public static String teacherName ;public Student() {}public Student(String gender, String name, int age) {this.gender gender;this.…

图书管理系统(ArrayList和LinkedList)--versions3.0

目录 一、项目要求&#xff1a; 二、项目环境 三、项目使用的知识点 四、项目代码 五、项目运行结果 六、项目难点分析 图书管理系统--versions1.0&#xff1a; 图书管理系统--versions1.0-CSDN博客文章浏览阅读981次&#xff0c;点赞29次&#xff0c;收藏17次。本文使用…

Node 调试利器,前端、Node 开发必备 - VSCode JS Debug Terminal

经常看到有同学抱怨 Node 调试麻烦或者是搞不清怎么调试各种脚本、Jest、Webpack 等等&#xff0c;而偶尔看到的调试相关的文章又全都是在写 inspect、launch.json 这些方案&#xff0c;其实有一定学习成本。 而其实在 VSCode 中早已内置了相当无脑的 Debug 方式&#xff0c;就…

Mac苹果电脑玩幻兽帕鲁 Crossover玩Windows游戏

​​ 《幻兽帕鲁》&#xff08;英文&#xff1a;Palworld&#xff09;是一款近期在 Steam 爆红的动作冒险生存游戏&#xff0c;游戏设置在一个居住着「帕鲁」的开放世界中&#xff0c;玩家可以战斗并捕捉帕鲁&#xff0c;也能用它们来建造基地、骑乘和战斗。 不过目前《幻兽帕…
最新文章