在你十八岁的夏天，有没有一场让你难以忘怀的暴雨？你有没有渴望再经历一遍当年的雨？用js实现逼真雨景，炫酷！

最近微信更新了8.0，其中之一最好玩的莫过于表情包的更新了，大家都在群里纷纷玩起了表情包大战。 作为一个前端程序员，这就勾起了我的好奇心，虽然我从来没有实现过这样的动画，但是我还是忍不住想要去实现，最终我花了2天时间去看一些库的源码到我自己实现一个类似的效果，在这里我总结一下，…

老虎机的整体外观样式还是比较好写的，对老虎机的外观布局如果有兴趣的话可以直接参考代码，小编就不一一介绍了。文章主要介绍的是老虎机中间三个小格子和机身动画的一些实现要点。（读者想实操的话也可以自己找一张背景图当作老虎机的背景，这里小编只是自己好奇而已所以就用各种基础布局和样式实现…

本文阿宝哥将给大家介绍十个 「“酷炫屌"」 的图像悬停效果，希望阿宝哥精心录制的十个 Gif 动画能让大家眼前一亮，当然更希望这些特效能给大家设计图片悬停效果带来一些 「”灵感“」。 在日常工作中，如果小伙伴们也想实现图片悬停特效，阿宝哥推荐一个 Github 上的一个可扩展的…

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

最近团队需要做一个智能客服悬浮窗功能，需要支持拖动、放大缩小等功能，因为这个是全局插件，为了兼容性考虑全部使用原生 JS 实现，不引用任何第三方库或者插件。开发过程中遇到的一些问题及解决方法，在这里和大家分享交流一下。 看这个效果，相信大部分开发都会觉得实现起来比较容易。在实际…

为了能更容易理解，在开始之前，我们要先达成4个共识。 ... 咳咳咳 不好意思，跑题了 1. transition 和 animation 设置元素 两个不同的状态 和 过渡的时间。 animation 允许我们写多个状态值，为我们解锁了一次告诉浏览器多个状态变化的能力。 告诉…

比如下图中，有的列表项的文字短，有的文字长。 需求是：希望文字长的部分能通过动画滚动显示。 我的第一反应是用纯 CSS 做不了。 其中涉及了一些有趣 CSS 知识点，在这里分享一下。 1. 如何让文字溢出容器？ work-break 属性是用来处理文字如何换行的，这里使用了不太…

贝塞尔曲线，想必大家或多或少都听过这个词，因为其控制简单，且其曲线更符合我们大众的审美，所以在很多领域都有涉及，当然这些都不是我们今天要进行讨论和分享的重点。今天要分享的是如何成为自定义UI中的一把利器，先上两张图看看效果，然后开始我们的分享。 想要讲清楚多阶贝塞尔曲线，我们先…