30 seconds of css是跟30 seconds of code 类似的项目,翻译中文版已经很久了,今天列举几个自己觉得比较有用的片段,使用CSS3实现某些前端效果,还是挺炫酷的。
阅读全文css3动画
分享CSS3动画,CSS3手风琴,CSS3 animation、CSS3 transform和CSS3 transition等CSS3新技术
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。
阅读全文在使用CSS3动画中,会有需要监听动画是否已经结束并对事件进行处理,最好的方法就是使用animationend。我们通过JavaScript来监听动画的开始、进行和结束,这样子方便我们随时控制运动中的元素。
阅读全文CSS3 animation状态结束后可以通过animation-fill-mode 控制动画的最后状态,分别是不改变默认行为、保持最后一个属性和回到第一帧。
阅读全文《CSS揭秘》里面发现一个很独特的一个动画,使用纯CSS3动画让一个元素沿着环形路径运动。听起来有点不可思议,本文将带你一起走进作者的文章中,由复杂到简单,由多个结构到简单结构解剖CSS3语句实现环形运动。
阅读全文今天在微博上分享了一篇关于“CSS3进度圆环”的做法,然后回来搜了一下,发现了这个比较给力的做法和解说。分享给大家:
阅读全文摘要:使用3D硬件加速提升动画性能时,最好给元素增加一个z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能,移动端优化效果尤为明显。 以下为原文:CSS3硬件加速也有坑!!! 常听人说: 移动 ...
阅读全文