关于播放动画，这个很简单，我们可以用css3的逐帧动画来实现。关于逐帧动画，我之前的文章也写过：http://www.haorooms.com/post/zhuzhen_dh 除了动画之外，剩下的就是js对audio的控制了。 关于html5 audio标签，有很多属性，大家可…

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。 经常有人私信我，小智这个设计图用 CSS 要怎么布局呀，这个按钮要怎么画的。所以今天，在这篇文章我们来介绍一些新的布局的方法，希望对智米们有些用处。 我通常做的第…

持续更新...

最近我在CodePen上发现了一个纯CSS实现，具有渐变倒影和3D旋转效果的栅栏动画，他的实现方式是：利用10个<div>元素创建10个栅条，接着再复制整份<div>元素，并创建一个渐变遮罩形成渐变效果，以此作为栅栏的倒影。 这听起来有点像用左脚的脚趾去抓你的右耳背部（译者理解…

em 和 rem 是配合 flexible 方案非常火的一种相对单位， 虽然该方案已经凉了，但依然是当前兼容性最好的可伸缩布局方案。 两者的差别只是 rem 总是以根节点 (html) 的字体大小作为参考，你看命名 rem 就是 root em，而 em 则以当前元素的字体大小…

注：[n]标识为遗留问题，在文章末尾遗留问题部分有详细解释说明。 之前做了一个在线给图片添加文本框的工具，大体思路是先把图片加载到一个 DOM 结构中，然后通过 html2canvas 导出到一个canvas，最后通过 canvas 自带的 toDataURL 方法导出成图片。…

大多数开发者基本都使用浏览器的开发者工具调试前端，但即使用了好几年 Chrome 的开发者工具，我仍然会遇到从未见过的技巧和功能。 在本文中，我写了许多在开发者工具中与 CSS 相关的功能和技巧，我认为它们将把你的 CSS 开发水平提升至一个新的台阶。其中一些技巧不仅仅针对 C…

当使用任何 CSS 的新特性的时候，浏览器的兼容问题都必须去解决。与 Flexbox 和 CSS Grid 一样，在使用 CSS 新特性布局时，兼容性比性能增强更值得考虑。 在这篇文章中，我将探索现今处理浏览器兼容问题的方法。为了让我们现在就用上 CSS 的新特性，我们可以做出…

前几天，同事接到一个积分商城项目，其中有一个卡券兑换礼品功能。我想了一会没什么好的思路，就忙自己的项目去了。但想到以后自己可能也会遇到类似的需求，所以周末学习整理了下几种卡券效果的实现。