本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 1、交错动画 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将

近来研究了一下镂空效果。 背景被裁剪为文字的前景色。第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上，这个玩意用得到处都是。 这样，做简单的图片背景镂空效果便不再困难了。关键代码只有几行。 就这几行，视觉上会就会有大变化。前后对比： back…

正文从下面开始。 今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。 嗯，我们需要使用 filter + mix-blend-mode 的组合来完成。 如上图，整个蜡烛的骨架， 除去火焰的部分很简单，掠过不讲。主要来看看火焰这一块如何生成，并且如何赋予动画效果。 模糊滤镜…

布局和样式，是每个前端的必修课。在日常的工作中，也会碰到一些特定场景的布局需求，配合上样式，就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局，以及浏览各大网站时碰巧发现的神奇特效写法，在此做个分享。 由于篇幅原因，会分为 2 篇。今天，会先介绍一些有趣而又实用的布局的写…

这是关于时间的。在本文中，我们将接受创建和设置时钟动画的挑战，使用简单的CSS动画和JavaScript来触发它们。 这是我们使用HTML，CSS，SVG背景和一些JavaScript创建的时钟。我们将使用CSS动画或过渡进行任何移动，并依靠JavaScript来设置初始时间并…

1. 思路 2. 设计 我们再定义一个与容器颜色相同的盒子, 将上半部分盖住就可以啦. 3. 最终解决方案代码

乍一看你可能会觉得纯CSS动画可能做不到，实际上知道了原理还是比较简单的。 从上面样式里看出，每盏灯的 animation 持续时间都是10s，那动画不断循环播放的时候，它们之间就会一直保持同步的时间关系。 从图中看，一共分5个阶段或者说5个步骤，在每个阶段，不同的灯处于 on…

1. 初识 flex flex 是 flexible 的缩写，意思为弹性布局，用来为盒模型提供最大的灵活性。 2. flex 布局和正常布局比较 3. flex 属性 flex-direction 改变主轴的方向，默认为 row 横向排列。属性包含 row | row-reve…

以前看过许多教学视频，大部分讲师都是讲个大概，然后就开始无厘头的灌输知识了。直到我后来看到一位优秀讲师的视频，他的讲课模式是第一堂课展示成果。这样下来，当我看到最终效果，我就有心思去不断学习这个东西了。 1. 简单的渐变动画 2. 稍复杂的关键帧动画 3. 结合transfor…