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

一. 功能分析 二. 具体实现 1. 堆叠效果 2. 图片滑动 3. 条件成功后的滑出，条件失败后的回弹 4. 滑出后下一张图片堆叠到顶部 重新堆叠是组件最后一个功能，同时也是最重要和复杂的功能。在我们的代码里，stack-item的排序依赖绑定:style的transform…

伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素。具体的伪类和伪元素相…

循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总…

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

前两天在浏览 苹果 16寸 营销页面 的时候，发现了几个比较有意思的交互，心里想着自己虽然是一个穷逼，但是知识是无界限的呀，于是便研究了一波。 一个是屏幕慢慢打开的效果，在屏幕打开的过程中，电脑图片 是在屏幕中固定不动的，直到打开完毕或者关闭完毕的时候再让 电脑图片 随着滚动条…

今天圣诞节,先预祝大家节日快乐.既然是圣诞节,那我们就来学点有意思的,用几十行代码来实现一个高性能的抽奖小游戏.也基于此,来巩固我们的javascript基础,以及前端一些基本算法的应用. 由于目前已有很多方案可以实现九宫格抽奖动画,比如使用动态active实现边框动画,用随机…

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