一. Css吃豆人动画 1. 上半圆：两个div，内部一个圆div，外部设置宽高截取半圆 外部div动画：animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite(动画无限播放) 动画样式：@keyframes：设置50%转45度，100%转0度 transfor ...
分类：
Web程序 时间：
2020-02-22 15:35:29
阅读次数：
93
<style> * { margin: 0; padding: 0; box-sizing: border-box; } .box { margin: 200px auto; width: 200px; height: 300px; position: relative; transform-sty ...
分类：
其他好文 时间：
2020-01-12 21:40:08
阅读次数：
188
1. 什么是动画 动画是 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果 2. 动画的基本使用 先定义动画 在调用定义好的动画 3. 语法格式(定义动画) 4. 语法格式(使用动画) 5. 动画序列 0% 是动画的开始，100 % 是动画的完成，这样的 ...
分类：
其他好文 时间：
2019-12-31 20:06:45
阅读次数：
111
动画 之前说的过渡也是属于动画的范围，只不过它只能是开始到过渡这两个点，中间由浏览器去完成，而动画允许开发者一帧一帧的去编码。 @keyframes 要执行的动画都写在这个规则里 是自定义的名字 from就是之前的状态，to是之后的状态，嗯，这个其实和过渡没啥区别，这是第一种写法。 然后就是这行代码 ...
分类：
Web程序 时间：
2019-12-25 01:36:27
阅读次数：
109
在掘金上看到一个大神总结的animation相关东西，感觉很震撼，需要记录一下 主要也是借助chrome devtool来查看相关的属性，然后去调整 自己只知道有 animation name animation delay time function 次数等，其实这些事w3c上写的，只写了6个，还 ...
分类：
Web程序 时间：
2019-11-22 01:02:16
阅读次数：
102
关键词：animation（动画名称，花费时间、是否轮流反向播放动画） @keframes 规则，创建动画（原理是将一套 CSS 样式逐渐变化为另一套样式） ...
分类：
Web程序 时间：
2019-11-20 16:43:44
阅读次数：
128
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r @keyframes 动画名称 ...
分类：
Web程序 时间：
2019-11-15 14:05:13
阅读次数：
87
共同点 animation动画与transition过渡都可以实现动画效果，拥有下面共同的属性 animation:mymove 2s linear infinite alternate; transition: width 1s ease-out; 1、动画名称（name）@key-frame 2 ...
分类：
Web程序 时间：
2019-11-06 00:56:04
阅读次数：
123
<img src="" /> 添加css img{ width:400px;height:auto; animation: heart 0.5s infinite; } /*animation:动画名称 消耗时间 运动曲线 开始时间 播放次数 是否添加反方向*/ 1.变化大小 @keyframes ...
分类：
Web程序 时间：
2019-11-02 15:51:14
阅读次数：
115
Mecanim动画（新版动画） 选中一个动画在右侧的属性面板中可以查看动画的种种属性， 动画类型：None：无任何动画 Legacy:旧版Animation动画 Generic：一般动画（非人型动画） Humanoid：人型动画 人型动画设置： 人型动画最重要的表示骨骼的设置，没有与之相匹配的骨骼， ...
分类：
其他好文 时间：
2019-10-29 09:31:23
阅读次数：
89
