【web】动画 （用法+例子）

最新推荐文章于 2024-02-18 09:23:49 发布
最新推荐文章于 2024-02-18 09:23:49 发布
阅读量731 收藏 4
点赞数 1
文章标签： 前端 动画 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49891575/article/details/126804193
版权

动画

属性：

  • animation-name：动画属性名
  • animation-duration：动画持续时间
  • animation-delay：动画延迟时间
  • linear:匀速运动
  • animation-timing-function：动画速度曲线
    • 值可以为：cubic-bezier(.17,.67,.7,.88)
    • https://cubic-bezier.com/#.17,.67,.7,.88可以打开网址生成
    • 可将速度变为慢-快-慢等过程
  • animation-iteration-counton：定义循环次数，infinite为无限循环
  • animation-direction:alternate：动画轮流反向播放
  • animation-play-statepaused：动画状态，值paused,running
  • animation-fill-mode：forwards保留最后一帧动画
    用法：
 <style>
        /*定义关键帧*/
        @keyframes changediv {
            from {/*动画起始状态*/
                width: 200px;
                height: 200px;
                background-color: tomato;
            }
            to {/*动画结束状态*/
                width: 300px;
                height: 300px;
                background-color: gold;
            }
        }
        div{
            width: 100px;
            height: 100px;
            background-color: tomato;
            animation: changediv 2s;/*动画名，执行时间*/
        }
    </style>
<body>
    <div></div>
</body>
轮播图案例（使用动画做）

  • 创建动画

    • left从0移动到-1200
     @keyframes move {
            from {
                left: 0;
            }
            to {
                left: -1200px;
            }
        }

    • 移动盒子引用动画

      animation: move 5s linear infinite;/*动画名，5s时间，匀速运动，无限循环*/

  • 从左上角为基线开始移动

    • 左上角为0，显示第一张图片
    • 左上角为400，第二张图片
    • 左上角800，显示第三张图片
    • 左上角1200，显示第四章图片
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        @keyframes move {
            from {
                left: 0;
            }
            to {
                left: -1200px;
            }
        }
        .window {
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
            box-shadow: 2px 2px 5px gray;
            margin:0 auto;
        }
        .move {
            width: 1600px;
            height: 300px;
            position: absolute;
            animation: move 5s linear infinite;
        }
        li {
            width: 400px;
            height: 300px;
            float: left;
        }
        img {
            width: 400px;
            height: 300px;
        }
    </style>
<body>
    <div class="window">
        <ul class="move">
            <li><img src="./03.jpg" alt=""></li>
            <li><img src="./04.jpg" alt=""></li>
            <li><img src="./img1.jpg" alt=""></li>
            <li><img src="./img2.jpg" alt=""></li>
            </ul>>
    </div>
</body>

  • 动画不衔接的问题

    • 把第一个图片复制一份放最后面
    • 同样，滚动距离、盒子宽度都需要修改
<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        @keyframes move {
            from {
                left: 0;
            }
            to {
                left: -1600px;
            }
        }
        .window {
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
            box-shadow: 2px 2px 5px gray;
            margin:0 auto;
        }
        .move {
            width: 2000px;
            height: 300px;
            position: absolute;
            animation: move 5s linear infinite;
        }
        li {
            width: 400px;
            height: 300px;
            float: left;
        }
        img {
            width: 400px;
            height: 300px;
        }
    </style>
<body>
    <div class="window">
        <ul class="move">
            <li><img src="./03.jpg" alt=""></li>
            <li><img src="./04.jpg" alt=""></li>
            <li><img src="./img1.jpg" alt=""></li>
            <li><img src="./img2.jpg" alt=""></li>
            <li><img src="./03.jpg" alt=""></li>
            </ul>
    </div>
  • 图片不停留问题
    • 在各时间段设置位置，这样图片就会有停留
 @keyframes move {
            0% {
                left: 0;
            }

            24% {
                left: 0;
            }

            26% {
                left: -400px;
            }

            49% {
                left: -400px;
            }

            51% {
                left: -800px;
            }

            74% {
                left: -800px;
            }

            76% {
                left: -1200px;
            }

            98% {
                left: -1200px;
            }

            100% {
                left: -1600px;
            }
        }
再加入小点

完整版

<style>
* {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        @keyframes move {
            0% {
                left: 0;
            }

            24% {
                left: 0;
            }

            26% {
                left: -400px;
            }

            49% {
                left: -400px;
            }

            51% {
                left: -800px;
            }

            74% {
                left: -800px;
            }

            76% {
                left: -1200px;
            }

            98% {
                left: -1200px;
            }

            100% {
                left: -1600px;
            }
        }
        @keyframes changeColor{
            0%{background-color: cyan;}
            25% {background-color: cyan;}
            25.1% {background-color: white;}
            100% {background-color: white;}
        }
        .window {
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
            box-shadow: 2px 2px 5px gray;
            margin: 0 auto;
        }

        .move {
            width: 2000px;
            height: 300px;
            position: absolute;
            animation: move 10s linear infinite;
        }

        li {
            width: 400px;
            height: 300px;
            float: left;
        }

        img {
            width: 400px;
            height: 300px;
        }
        .dots {
            width: 200px;
            height: 6px;
            /* background-color: pink; */
            position: absolute;
            left: 100px;
            bottom: 20px;
            display: flex;
            justify-content: space-evenly;
        }
        .dot {
            width: 6px;
            height: 6px;
            background-color: white;
            border-radius: 50%;
            float: left;
            animation: changeColor 8s linear infinite;
        }
    </style>
<body>
    <div class="window">
        <ul class="move">
            <li><img src="./03.jpg" alt=""></li>
            <li><img src="./04.jpg" alt=""></li>
            <li><img src="./img1.jpg" alt=""></li>
            <li><img src="./img2.jpg" alt=""></li>
            <li><img src="./03.jpg" alt=""></li>
        </ul>
        <div class="dots">
            <div class="dot" ></div>
            <div class="dot" style="animation-delay: 2s;"></div>
            <div class="dot" style="animation-delay: 4s;"></div>
            <div class="dot" style="animation-delay: 6s;"></div>
        </div>
    </div>
</body>

效果：自动切换图片，点跟着图片的切换而切换
效果

熊孩子er
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端学习：关键帧动画
yxiangy的博客
08-15 715
前端学习：关键帧动画
八 WebRTC 关键帧请求PLI与FIR
zrjliming的博客
09-22 2156
目录 一 关键帧请求场景 二 PLI与FIR 前言: IDR Request 关键帧也叫做即时刷新帧，简称IDR帧。对视频来说，IDR帧的解码无需参考之前的帧，因此在丢包严重时可以通过发送关键帧请求进行画面的恢复。关键帧的请求方式分为三种：RTCP FIR反馈（Full intra frame request）、RTCP PLI 反馈（Picture Loss Indictor）或SIP Info消息，具体使用哪种可通过协商确定. 一 关键帧请求场景 1.1 H264解码无sps,pps信息 .
Web 动画基础：从发展史中了解 Web 动画及动画的作用
最新发布
sybh的博客
02-18 548
在这个竞争激烈的环境中，所有人正在拼命寻找捕捉和保留人们注意力的方法。当我们在日常生活中进行活动时，从街头的动画广告、手机上的视频，更不用说社交媒体的信息流中涌来的无尽视觉刺激，都营造了一种不断移动的感觉，争相吸引我们的注意力。我们对环境中的运动产生的瞬时反应是出于生存的需要，由感知为潜在威胁或有害的环境刺激触发；人们会额外关注那些运动的事物。当我们眼角瞥见一些快速运动的东西时，大脑会在瞬间提醒我们，因为我们的潜意识早在我们的意识有时间处理信息之前就已经对危险作出了反应。
Web 页面如何实现动画效果
前端开发
02-06 3222
Web 页面可以使用多种方式实现动画效果，其中最常用的有两种： 1. CSS 动画：通过 CSS 中的 transition 和 animation 属性来实现动画效果。CSS 动画实现起来简单，性能消耗小，支持广泛。 2. JavaScript 动画：通过 JavaScript 代码来实现动画效果。JavaScript 动画实现更加灵活，可以实现更多复杂的动画效果，但性能消耗比较大。 在实际项目中，需要根据需求和性能考虑来决定选择哪种方式来实现动画效果。
web前端开发—进阶css（动画）
m0_59451453的博客
04-21 925
动画名称和动画时长必须赋值；如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间。构成动画的最小单元：帧或动画帧。设置盒子尺寸是一张小图的尺寸（图片的分辨率➗小图个数），背景图为当前精灵图。实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）答：精灵动画的同时添加盒子位移动画。改变背景图的位置（移动的距离就是精灵图的宽度）。开发中，一般配合精灵图实现动画效果。答：实现2个状态间的变化过程。使用steps实现逐帧动画。将动画过程等分成N份。过渡可以实现什么效果？
程序猿必备的8款web前端动画插件九
测试
01-25 361
1.HTML5/CSS3实现四季更替过渡动画 采用HTML5和CSS3技术我们可以实现很多色彩变幻和情景过渡动画效果，之前分享的这款HTML5 SVG天气预报动画卡片就是一个很不错的例子。这次我们带来的是一款基于HTML5和CSS3的四季更替过渡动画特效，一副简单的森林景象伴随着春夏秋冬四季更替，每一个季节都展现出各自的唯美风景，非常的不错。 在线演示 源码下载 2.漂亮的纯CSS3开关...
移动web网页开发——动画
m0_45659764的博客
03-30 3162
一、动画 1.1 动画 使用animation添加动画效果 思考：过渡可以实现什么效果？ 答：实现2个状态间的变化过程 动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停） 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面 构成动画的最小单元：帧或动画帧 1.2 动画的实现步骤 实现步骤 1、定义动画 两个状态之间的变化： @keyframes 动画名称 { from {} to {} } 多个状态之间的变化： ...
简单静态web页面+动画(小案例)
qq_44859233的博客
11-28 1716
话不多说,先看效果图 图片会动态变化,由大到小,展现在页面,没有录制动图的工具,演示不了,不好意思 接下来画图展示 底部 看源码(html部分): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
【web素材】14— 200 个+ CSS 加载动画效果（上）
web前端开发
09-04 343
来源 | https://dev.to/afif/i-made-100-css-loaders-for-your-next-project-4eje很久没有跟大家分享【web素材】了，今天跟大家分享一期关于加载动画效果的素材资源，这些素材既可以作为初学者的练习资源，也可以作为实际开发项目时的灵感来源，因此，我把它均整理到了文章中，因为素材比较多，我把它拆解为了上下两部分，今天先把上部分分享给大家，...
C#.net_经典编程例子400个
05-17
152 3.8　ServiceController组件　154 实例107　使用ServiceController组件控制计算机的服务　154 3.9　ImageList组件　156 实例108　使用ImageList组件制作动画图片　156 3.10　DirectoryEntry组件...
web_progress
05-21
循环进度动画，您可以在其中放置任何视图 ##最低SDK版本最低的SDK支持版本是11 例子 用法 < com .github.glomadrian.dashedcircularprogress.DashedCircularProgress android : id = " @+id/simple " android ...
Web组件构建框架Polymer.zip
07-16
 ·Web动画：实现复杂动画的API。 ·Pointer事件：对鼠标触摸和手写笔事件的封装这些polyfills可以分开使用而不需要使用Polymer的其他部分。此外，Polymer提供： polymer.js: Polymer的核心运行引擎，能轻易创建...
GDI+图像程序设计(PDF & 源码 -电子工业出版社）
11-09
7.4 在GDI+ 中播放动画 7.5 使用位图 7.6 使用图标 7.7 扭曲图像 7.8 绘制透明的图形对象 7.9 查看多个图像 7.10 使用图片框查看图像 7.11 使用不同的大小保存图像 总结 第8章 高级图像处理 8.1 渲染位图...
code_Web.rar_Active X_cimage_gsm-r_web处理excel_手机 图像
09-21
动画按钮 对话框的使用例子 图像处理(恢复)的软件,只有部分功能 =========================================================.. Gsm手机(短信息，电话簿)通信协议 Excel ASP互联组件 ImageMagick-4.2.1 cimage 编程...
C#GDI+图形程序设计源码
06-30
4.6 一个真实世界的例子 ——在GDI+ Painter应用程序中添加颜色、钢笔和画笔 总结 第5章 颜色、字体和文本 5.1 访问Graphics对象 5.2 使用颜色 5.3 使用字体 5.4 使用文本和字符串 5.5 渲染文本的质量和性能...
animated-navigation-panel:动画导航面板的原型
06-06
这是一个单页 Web 应用程序，用于演示带有显示导航托盘的动画标题的 JavaScript 原型。 这都是手工制作的自定义代码，以确保 60fps (#perfmatters)。 这不使用任何 JS 框架。 使用 grunt 可以生成更多使用文档，...
复杂web动画，不慌，选择 web Animations API
奇舞周刊
11-02 779
前言说到前端动画，我们熟知的有两种CSS 动画(requestAnimation/setTimeout/setInterval + 属性改变) 动画当然有人可能会说canvas动画，从运动...
web动画效果实现
ltf-spaceweixin_46032911的博客
10-21 686
animation属性 css样式 *{ margin: 0px; padding: 0px; } .box1{ width: 1520px; height: 690px; background-color:black; position: relative; ove
web前端进阶之一些动画
小王的技术库
10-31 683
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
web引入帧动画图片左右反转
06-09
要实现帧动画图片的左右翻转，可以通过CSS的transform...在这个例子中，动画会从原始状态开始，到50%的时候进行翻转，然后再回到原始状态，不断重复这个过程。 通过上述方法，就可以实现帧动画图片的左右反转效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值