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

学习之前可以先看看酷炫的动画效果，想想怎么实现。 从最近在做的需求说起，一个优惠券样式，过设计稿的时候认为没什么大不了的，满口答应了。真正开始开发的时候遇到问题，主要是镂空效果实现方式上比较费劲。要求是背景可配，并且票身可以配背景图，然后镂空是真镂空。 设想并尝试了很多种方案，…

图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将大大增加页面的首屏加载时间。为了解决这种问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏图片请求数的技术就被称

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动…