某天设计师来找我说，“这个心愿牌傻傻地挂在那不好看，加个动效呗，就左右摆动一下就行，很简单的！”，我一想，行呀，提升用户视觉体验，开搞。 十分钟后，🥶不对呀，这个左右摆动好假，不像现实中风吹的效果。 冷静思考🤔，为啥这个摆动会没有灵魂。于是拿起工卡开始摆动，看看现实中的摆动…

我们传统的前端更多的是用javascript实现各种复杂动画，自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。这篇文章参考《css揭秘》这本…

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景…

本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。 那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动…

CSS是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非…

在安卓中，直接使用原生 video 会导致全屏播放，盖住所有元素，因此使用 x5 播放器。但是 x5 播放器还是存在问题，虽然不会盖住元素，但是会自己添加特效（盖一层导航栏蒙层）。 这样可以在安卓下使用 x5 播放器， playsInline 及 webkit-playsinl…

space-around: 每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍 flex-start: 与交叉轴的起点对齐。 flex-end: 与交叉轴的终点对齐。 center: 与交叉轴的中点对齐。 space-between: 与交叉轴两端对齐，轴线之间的间…

今天我们大家介绍一些你可能乍一眼以为一定需要 JavaScript 才能完成的功能，其实 CSS 就能完成，甚至更加简单。 1. 每个单词的首字母大写 其实我第一次看到这个功能的时候就是使用 JS 去实现这个功能，想都没想 CSS 可以完成这个功能。马上就屁颠屁颠的写了一个方法…

垂直居中，在 CSS 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。 有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::bef…