8-web前端 动画 案例

这篇具有很好参考价值的文章主要介绍了8-web前端 动画 案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、动画说明

目标:使用animation添加动画效果
 
  思考:过渡可以实现什么效果?
 
  答:实现2个状态间的变化过程
 
动画效果:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)
 
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
 
构成动画的最小单元: :帧或动画帧
 
2、定义动画
 
目标:使用animation添加动画效果
8-web前端  动画 案例
8-web前端  动画 案例
3、使用动画
8-web前端  动画 案例
 
4、动画属性
 
目标:使用animation相关属性控制动画执行过程
8-web前端  动画 案例
1.动画名称和动画时长必须赋值
 
2.取值不分先后顺序
 
3.如果有2个时间值,第一个时间表示动画时长,第二个时间表示延迟时间

8-web前端  动画 案例

 

 
目标:使用steps实现逐帧动画
 
逐帧动画:帧动画。开发中,一般配合精灵图实现动画效果。
 
animation-timing-function: steps(N)
 
  将动画过程等分成N份
 
5、案例: 精灵图动画制作
 
步骤:
 
准备显示区域
 
设置盒子尺寸是一张小图的尺寸,背景图为当前精灵图
 
定义动画
 
改变背景图的位置(移动的距离就是精灵图的宽度)
 
使用动画
 
添加速度曲线steps(N),N与精灵图上小图个数相同
 
添加无限重复效果
 
代码示例:
<!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>
        .box{
            width: 140px;
            height: 140px;
            background: url(./bg.png);
            animation: move 1s steps(12) infinite,move1 3s forwards;
            position: absolute;
            /* right: 0; */
            left: 0;
        }
        @keyframes move{
            to{
                background: url(./bg.png) -1680px 0;
            }
        }
        @keyframes move1{
            to{
                left: 50%;
                /* right: 50%; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

 
相关图片:
8-web前端  动画 案例
 
 
6、添加多个动画
 
多组动画
 
  思考:如果想让小人跑远一些,该如何实现?
 
  答:精灵动画的同时添加盒子位移动画。
8-web前端  动画 案例
 
7、3D动画案例  ---------  旋转木马
代码示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转木马</title>
    <style>
        .div{
            width: 200px;
            height: 300px;
            border: 1px solid red;
            margin: 300px auto;
            position: relative;
            /* perspective: 1000px; */
            transform-style: preserve-3d;
            transform: rotateX(-10deg);
            animation: move 30s linear infinite;
            /* transition: all 5s; */
            color: deeppink;
        }
        .div div{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .div div span img{
            width: 100%;
            height: 100%;
            position: absolute;
           
        }
        .div div:nth-child(1){
            background-color: aqua;
            transform: translateZ(500px);
        }
        .div div:nth-child(2){
            background-color: red;
            transform: rotateY(60deg) translateZ(500px);
        }
        .div div:nth-child(3){
            background-color: pink;
            transform: rotateY(120deg) translateZ(500px);
        }
        .div div:nth-child(4){
            background-color: blue;
            transform: rotateY(180deg) translateZ(500px);
        }
        .div div:nth-child(5){
            background-color: purple;
            transform: rotateY(-120deg) translateZ(500px);
        }
        .div div:nth-child(6){
            background-color: brown;
            transform: rotateY(-60deg) translateZ(500px);
        }
        @keyframes move{
            to{
                transform:rotateX(-10deg) rotateY(360deg);
            }
        }
        audio{
            display: none;
        }
    </style>
</head>
<body>
    <div class="div">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

 文章来源地址https://www.toymoban.com/news/detail-709942.html

 
结果图示:
8-web前端  动画 案例
 
 
       如果像放入照片在里面添加 img 标签即可,放上自己喜欢的人的照片。
 
愿:
  你喜欢的那个她,无论怎样也陪在你的左右,她是你的全世界,你的全世界是她,像网页的 ”旋转木马“ 一样,永远在围着世界转,永不停歇............
 
 

到了这里,关于8-web前端 动画 案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 高级web前端开发工程师的职责说明(合集)

      高级web前端开发工程师的职责说明1 职责: 1、根据需求文档,完成PC端、移动端页面及交互的开发,并保证兼容性和确保产品具有优质的用户体验; 2、熟练使用 HTML 、 CSS 、 JS 、 Ajax 等技术,能解决各种浏览器兼容性问题,完成页面架构和布局; 3、熟练编写结构良好,语义

    2024年02月14日
    浏览(46)
  • 12-web前端轮播图案例 (小米商城)

    说明: 轮播图在前端开发中是一种常见的元素,通常用于展示一系列的图片或者内容,并通过滑动或者点击的方式进行切换。使用JavaScript来实现轮播图有以下几个意义: 提升用户体验:轮播图可以在有限的空间内展示更多的内容,为用户提供更多的信息。同时,轮播图也具

    2024年02月08日
    浏览(46)
  • web前端综合案例——小兔鲜首页(html+css)

    前言:我这里只使用了html和css,js没有使用 项目源代码:https://pan.baidu.com/s/1alnekYEu5F9XwHTW7dO5RA?pwd=qjhd 页面效果:   1.准备项目相应的图片素材,设计稿。 2.创建项目: 2.1 项目名字为:xtx-pc-client 2.2 css里面创建了三个分别为         base.css 这个是全局设置的元素       

    2024年02月07日
    浏览(50)
  • Vue常用的组件库大全【前端工程师必备】【移动端、PC端(web端)、数据可视化组件库(数据大屏) 、动画组件库、3D组件库】

    1)Vant ui 🔸有赞移动 UI 组件库,支持 Vue2/3 微信小程序,支付宝小程序 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/col Vant 是由有赞前端团队开发的一套基于 Vue.js 的移动端 UI 组件库,它包含了丰富的组件和功能,可以帮助开发者快速构建高质量的移动应用。Vant 以简洁易用和高质量

    2024年02月04日
    浏览(58)
  • Lottie--前端动画效果--UI输出json格式--lottie动画在JavaScript中使用

    Lottie一个适用于Web、Android、iOS、React Native和Window的移动库,它可以使用Bodymovin解析以json格式导出的Adobe After Effects动画,并再移动设备上进行本地渲染。 1.需要引入JavaScript文件,我使用的是cdn中的链接。这里直接上链接,按需取用。点这里 2.json格式的文件 我不是UI啊,我也

    2023年04月09日
    浏览(51)
  • 超维空间S2无人机使用说明书——31、使用yolov8进行目标识别

    硬件:D435摄像头,Jetson orin nano 8G 环境:ubuntu20.04,ros-noetic, yolov8 步骤一: 启动摄像头,获取摄像头发布的图像话题 没有出现红色报错,出现如下界面,表明摄像头启动成功 步骤二:启动yolov8识别节点 出现如下界面表示yolov8启动成功 步骤三:打开rqt工具,查看识别效果 等

    2024年02月03日
    浏览(50)
  • 微信小程序常用弹框介绍及使用案例说明

    显示消息提示框 属性 类型 默认值 必填 说明 最低版本 title string 是 提示的内容 icon string success 否 图标 合法值 说明 最低版本 success 显示成功图标,此时 title 文本最多显示 7 个汉字长度 error 显示失败图标,此时 title 文本最多显示 7 个汉字长度 2.14.1 loading 显示加载图标,此

    2024年02月03日
    浏览(47)
  • uniapp - 超详细实现播放 svg / svga 格式动画组件插件,用于直播间赠送礼物特效动画或项目动画特效较多的应用(新手小白保姆级教程,提供插件+详细运行示例+使用文档+注意事项+格式说明)

    网上关于 uniapp 播放 svg / svga 格式动画的教程很乱,基本上全是 BUG 和各种不兼容,很难复制过来自己用。 本文实现了 在 uniapp 项目中(完美兼容 H5 / App / 微信小程序平台),播放 svg / svga 格式动画功能的详细介绍, 您只需要使用我提供的 “组件源码及插件”,放到项目中去

    2023年04月24日
    浏览(198)
  • 超维空间S2无人机使用说明书——51、基础版——使用yolov8进行目标跟踪

    硬件:D435摄像头,Jetson orin nano 8G 环境:ubuntu20.04,ros-noetic, yolov8 注:目标跟随是在木根识别的基础上进行,因此本小节和yolov8识别小节类似,只是在此基础上添加了跟随控制程序 步骤一: 启动摄像头,获取摄像头发布的图像话题 没有出现红色报错,出现如下界面,表明摄

    2024年02月03日
    浏览(41)
  • 详细说明使用husky规范前端项目搭建

    什么是husky: 操作git hook的工具,主要实现代码提交前 eslint 校验和 commit 信息的规范校验,也可以避免多人合作时代码格式化不统一造成的冲突 什么是git hook: 通常分为客户端钩子和服务端钩子,这里主要介绍客户端钩子。 pre-commit: 该钩子在键入提交信息前运行。 它用于检

    2024年02月11日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包