css制作序列帧动画

做成gif的动画效果，用多张图片组合成。
这里主要是用到animation中的steps

像我的项目需要37张图片组合成一个效果，一直播放动画。这边就不把37张图片截图了。

.gif{-webkit-animation: run-gif 2s steps(1,end) infinite;
}
@-webkit-keyframes run-gif{0%{background-image: url(../../static/gif/ic_box_light_000.png);}...//中间还有很多个,37张就要37个100%{background-image: url(../../static/gif/ic_box_light_036.png);}
}

正常写法是像上面这样的，但是需要重复写太多的css了
配合js来写

function setGif(){let ht = ''for(let i=0;i<36;i++){let a = i < 10 ? `0${i}` : i//2.85 计算37张 1张需要的动画百分比ht += `${2.85 * i}% {background-image: url(../../static/gif/ic_box_light_0${a}.png);}`}let keyframes = `@-webkit-keyframes run-gif{${ht}}`//给body添加动画cssvar sheet = document.styleSheets[0]sheet.insertRule(keyframes, 0)
}

over！

css制作序列帧动画相关推荐

HTML+CSS制作一个动画
HTML+CSS制作一个动画效果图如下: HTML部分结构如下: <!DOCTYPE html> <html lang="zh-Hans"><hea ...
CSS制作大风车动画及花朵
CSS是网页设计师和前端人员需要了解和学习的一门语言,特别是现在很多网页使用扁平化设计,这类设计风格大部分布局.交互动画甚至是图标都会使用高级点的CSS3技能,所以我们应该熟练掌握CSS这门样式语言. ...
CSS3控制变量输出精灵图序列帧动画 frameAnime.css
frameAnime.css [CSS精灵图序列帧动画]: 资源链接: 文档案例:http://miikio.gitee.io/frame-anime.css/ 备用下载:https://pan.ba ...
如何使用CSS来修改SVG原点和制作SVG动画
SVG元素可以像HTML元素一样,使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果. SVG元素可以像HTML元素一样,使用CSS keyfr ...
css 右上角翻开动画_css制作电闪雷鸣的天气图标
css制作电闪雷鸣的天气图标效果图如下实现思路使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 ...
HTML+CSS制作Windows启动加载动画
HTML+CSS制作Windows启动加载动画效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">&l ...
HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码...
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
css制作逐帧动画-案例
网页动画图像.Flash 动画和 JavaScript 实现的效果图片,我们用最基础的CSS也能实现.制作一个简单的gif动画图,上图就是效果图. 用CSS3制作动画图,你需要了解两个css属性. 一 ...
HTML+CSS制作七夕情人节求婚动画(520情人节程序员表白)
HTML+CSS制作七夕情人节求婚动画(520情人节程序员表白) css太强大了,只要你想做,everything is possible!CSS模仿求婚小动画效果图如下出现的新郎的动画 .w-m ...

css制作序列帧动画

css制作序列帧动画相关推荐

最新文章

热门文章