纯css实现动画帧效果

tanzhongfa2

css代码

[CSS] 纯文本查看 复制代码

body {
            background-color: #ccc;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画， 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }

html代码

[HTML] 纯文本查看 复制代码

<div></div>

将图片附件置于html文件夹的同一个目录下面

不言谢c

这不是 黑马 哪一级的 作业吗。忘记是模拟哪个官方网站了。一个熊 在冰上走。

随心而想

不言谢c 发表于 2022-3-20 12:30
这不是 黑马 哪一级的 作业吗。忘记是模拟哪个官方网站了。一个熊 在冰上走。

黑马2019学动画时的一个作业

Spa495

谢谢楼主分享，学习了

nihao3312

谢谢楼主分享

32K

《电脑动画初级入门》

reetin

感谢楼主分享。

CZ77

B站pink老师一节课的内容

奕余君

哈哈，看着好收悉，我也是从pink老师那看的html+css

huyinjunaaa

不言谢c 发表于 2022-3-20 12:30
这不是 黑马 哪一级的 作业吗。忘记是模拟哪个官方网站了。一个熊 在冰上走。

qq浏览器还是迅雷来着

tanzhongfa2

CZ77 发表于 2022-3-20 13:28
B站pink老师一节课的内容

对的，pink老师的学徒