css使用animation逐帧实现动画效果

た入场券 2023-01-01 02:52 196阅读 0赞

css使用animation逐帧实现动画效果，如图所示：![在这里插入图片描述][20201230190705629.gif_pic_center]  
由上图所示,它是一帧一帧无限循环实现的  
![在这里插入图片描述][20201230190804492.png_pic_center]  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                background:#000;
            }
            .bear{
                width:200px;
                height:200px;
                position:absolute;
                left:50%;
                top:50%;
                margin-left:-100px;
                margin-top:-100px;
                background:url(../../assets/images/bear.png) no-repeat 0 0;
                animation:move 1.5s steps(8,end) infinite ;
            }
            @keyframes move{
                0%{
                    background-position:0 0;}
                100%{
                    background-position:-1600px 0;}}
    
        </style>
    </head>
    <body>
        <div class="bear">
    
        </div>
    </body>
    </html>

[20201230190705629.gif_pic_center]: /images/20221120/4ab68cb02b3d4fa48a85ba6d1d5da406.png
[20201230190804492.png_pic_center]: /images/20221120/e6dc5f4d38de428cb847a4aa9ee2cd8f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3系列之animation实现逐帧动画

![1609428-20190728151248913-1545605264.gif][]![1609428-20190728151516302-956452338.gif][

￡神魔★判官ぃ/ 2023年08月17日 15:23/ 0 赞/ 93 阅读

相关 css使用animation逐帧实现动画效果

css使用animation逐帧实现动画效果，如图所示：![在这里插入图片描述][20201230190705629.gif_pic_center] 由上图所示,它是一帧一

た入场券/ 2023年01月01日 02:52/ 0 赞/ 197 阅读

相关 css制作逐帧动画-案例

> 网页动画图像、Flash 动画和 JavaScript 实现的效果图片，我们用最基础的CSS也能实现。制作一个简单的gif动画图，上图就是效果图。 > > 用CSS3制作

柔情只为你懂/ 2022年09月05日 01:58/ 0 赞/ 289 阅读

相关使用逐帧动画实现一个忐忑的精灵动画

1、在res目录下，创建一个名称为anim的目录，在该目录下添加一个名称为fairy.xml的资源文件 <?xml version="1.0" encoding="u

朴灿烈づ我的快乐病毒、/ 2022年08月19日 12:17/ 0 赞/ 184 阅读

相关 Android 动画解析(一) 逐帧动画(Frame Animation)

简介开发Android的同学都知道，Android中的动画有逐帧动画(Frame Animation)、补间动画(Tween Animation)以及属

你的名字/ 2022年07月17日 00:08/ 0 赞/ 289 阅读

相关深入理解CSS3 Animation 帧动画

CSS3我在5年之前就有用了，包括公司项目都一直在很前沿的技术。最近在写慕课网的七夕主题，用了大量的CSS3动画，但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是

电玩女神/ 2022年07月16日 10:18/ 0 赞/ 202 阅读

相关 jquery结合animate.css 动画效果的实现

本案例是在bootstrap下的实验环境， html代码 <li class="thumbnail col-md-2">

今天药忘吃喽~/ 2022年06月02日 00:05/ 0 赞/ 215 阅读

相关 CSS animation动画:实现台球运动效果

CSS animation动画:实现台球运动效果在学习animation动画的时候，我就得这个特别有意思，以后还想制作其他的超酷的效果，以前觉得弄特效的特别帅，感觉现在

待我称王封你为后i/ 2022年03月08日 06:51/ 0 赞/ 292 阅读

相关使用CSS3-animation简单制作逐帧动画

今天做了个demo。使用CSS3-animation来制作逐帧动画，非常简单！动画的关键是使用了animation的steps属性。至于怎么用，什么原理，读者可以自己去查阅

梦里梦外;/ 2021年11月16日 10:02/ 0 赞/ 258 阅读

相关 Android动画——逐帧动画

1、概述 Android 平台有一套完整的动画框架，在Android3.0之前有两种动画，一种方式是补间动画 Tween Animation、另一种叫逐帧动画 Frame A

蔚落/ 2021年09月22日 05:06/ 0 赞/ 639 阅读