本期分享一下如何仅用CSS3，实现单标签的动态晴阴雨雪。技术关键点就是“单标签”和“纯CSS”。先看下最终效果： 没错，就是这么任性，每个动图就一个标签，而且无图无JS！下面就来详细介绍下技术实现。 以及实现单标签最关键的:before、:after伪元素运用。 最大的一点就是…

其实你叫我单纯的回答你们什么是BFC，我只能告诉你BFC的全称（Block Fromatting Context）和中文翻译名（块级格式化上下文）。如果你叫我深入的解释这这个名词，这就好比你叫我来解释什么叫男生/女生一样，大家我都知道这两个名词，但是你叫人跟你解释清楚却是很麻烦…

之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。 和之前所有博文一样，还是先从What的角度开始介绍，由浅入深的理解BFC。 所谓的 Formatting context(格式化上下文), 它是 W3C CSS2…

说到div的形状，基本上想到的都是圆形或者方形，这两种形状其实也已经符合了前端95%的应用场景(95%的数据从哪得来的 - - !)，但是作为一个不愿随波逐流的程序员，就是要搞事情。 (图片来源于网络)果然限制我们创造的不是想象力，而是兼容性。支持浏览器的版本偏高，如果你是做正…

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

最近，我从 Grover网站上发现以一个好玩儿的悬停动画，也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。 我们要做的第一件事就是获取到鼠标的位置。 将坐标存…

Flex 弹性盒子布局是很强大的布局，它可以很方便的控制元素在垂直和水平方向上的行为。 要使用 Flex，首选需要一个 Flex 容器（flex container）。使用display: flex;创建，flex 是一个 CSS 的display属性中新添加一个值，而容器下的…

上一篇 一些有趣的 CSS 魔法和布局（上） 中，我们聊了一些有趣且实用的布局。今天，将呈现一些 CSS 带来的魔法特效，有部分特效可以帮我们省去不少工作量。 在以前遇到这个需求的时候，我们可能会想到用 JS 来操作内容的显式与否。现在，CSS3 的 transition 可以…

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