文章关键字 ‘animation’
2018年07月22日,星期日
在CSS3中,我们要想实现从A颜色到B颜色的过渡效果,是相当容易的,只要指定起止颜色,配合transition
过渡或者animation
动画都可以时间我们想要的效果。
但是,在<canvas>
中却没有这么简单,因为<canvas>
本质上是一个静态画布,要想实现颜色变化,需要JS去不断绘制,实现起来要比CSS实现麻烦很多。再加上颜色值本身就不一定是纯粹的数值,更增加了我们实现的难度。
本文就将通过多个案例,逐步深入,介绍一些在Canvas中的颜色处理技巧,有些技巧说不定会让你大开眼界。
阅读全文…
标签:animation, getComputedStyle, hsla, RGB, rgba, 动画, 颜色
发布在 Canvas相关 | 3 条评论 »
2018年03月23日,星期五
用一句话解释Web Animations API就是把CSS3实现的animation动画变成有JS代码实现。
各有优势。CSS3 Animations动画简单,灵活,复用性强,非常适合静态动画效果;Web Animations参数由JS控制,与单个元素绑定,因此非常适合不固定的动态动画效果,例如随机动画……
阅读全文…
标签:animation, fade, Web Animations, 动画
发布在 JS API | 4 条评论 »
2016年09月16日,星期五
大家应该都知道,如果元素没有格式化的高度值,子元素的height百分比高度是不起作用的,常见的就是height:100%无效,而宽度就没有此问题,所以,新人经常会提出的一个问题是:“为何我的div设置了height:100%却没有效果?”
不知道大家有没有思考过这样一个问题。
然后,有同行就提出了这么一个看似很合理的解释,就是,“假如父元素height:auto且没有其他格式化高度,子元素支持height:100%,则很可能会出现高度死循环”。
看似合理,实际上这种解释是表面的,错误的……
阅读全文…
标签:animation, 循环, 死循环, 渲染, 父选择器, 百分比
发布在 CSS相关 | 36 条评论 »