青春別樣美

某一天我收到了产品发来的微信消息。小X，我们的业务现在需要一个类似加入购物车的掉落动画，经过组织的慎重考虑，这个需求就交给你了。于是便有了这篇文章。本文并没有描述多少高深的技术，更多的是一些笔者在做动画时对动画原理的思考以及如何优化动画的一些思路。实现效果如下： 前端实现动画的…

Vue 中需要输入什么内容的时候，自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定。下面是一个最简单的示例 在这个示例的输入框中输入的内容，会随后呈现出来。这是 Vue 原生对 <input> 的良好支持，也是一个父组件和子组件之间进行双向数…

white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本却又容易让人迷惑的三个属性了，估计很多人都有把它们搞混或用错的经历。必须系统整理一下，今天我们就把这三个属性彻底搞清楚！ 可以看到，nbsp;和</br>可以正常发…

已知20条内容要有弹幕效果，分成三层，速度随机。 所以这里不考虑填写生成的。只是一个展现的效果。

这篇是学习和回顾canvas系列笔记的第六篇，完整笔记详见：canvas核心技术。 在上一篇canvas核心技术-如何实现复杂的动画笔记中，我们详细讨论了在制作复杂动画时，需要考虑时间因素，物理因素等，同时还回顾了如何使用缓动函数来扭曲时间轴实现非线性运动，比如常见的缓入，缓出…

作为一个 CSS 渣，这次在看到一个 Vue 组件库的按钮里有个点按之后的效果之后跃跃欲试。 效果大概长这样： 首先先观察了一番，大概得到以下特征： 以鼠标按下的位置为原点，以某个值为半径进行扩散 在长宽、以及透明度上，均有渐变 原本是 Vue 实现的，但剥离框架实现，就还得在…

之前项目还用 jQuery 的时候，要在页面上做一个飘东西效果，类似下雪那样。当时使用的是一个开源组件 jquery.let_it_snow。 props 大致和 jQuery 版本的 let_it_snow 差不多，多添加了用来控制显示隐藏的 show 和多图片支持的 ima…

✏️ 一般说到Js的this，都会想起在函数中变来变去的this。但是事情的发生都是有规则的约束，Js中的this也不例外，下面我们来看一下JS中this指向的规则 其实这也是符合默认指向这个规则的，在这个小例子中，showAge函数在执行的时候并没有被打点调用如：×××.sh…