网站 › 『编程语言区』 › 纯css实现动画帧效果

tanzhongfa2 发表于 2022-3-20 11:47

纯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代码
<div></div>
将图片附件置于html文件夹的同一个目录下面

不言谢c 发表于 2022-3-20 12:30

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

随心而想 发表于 2022-3-24 11:36

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

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

Spa495 发表于 2022-3-20 12:01

谢谢楼主分享，学习了

nihao3312 发表于 2022-3-20 12:21

谢谢楼主分享

32K 发表于 2022-3-20 12:24

《电脑动画初级入门》

reetin 发表于 2022-3-20 12:50

感谢楼主分享。

CZ77 发表于 2022-3-20 13:28

B站pink老师一节课的内容

奕余君 发表于 2022-3-20 16:14

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

huyinjunaaa 发表于 2022-3-20 17:17

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

qq浏览器还是迅雷来着

tanzhongfa2 发表于 2022-3-21 10:08

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

对的，pink老师的学徒

查看完整版本: 纯css实现动画帧效果