一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。 文件大小：55.2 kB. 和其他的同类工具不同的地方在于，它不仅仅是一个库，而是有这用户可以直接操作的实际功能，它带有一个完整的网页构建器。Bounce.js 是为数不多的可以直…

... 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等，你真的能分清这些概念的意义吗？ 本文将从移动端适配的基础…

最近学到Flexbox布局，当时就感觉真是一个布局的神器。终于摆脱了利用各种定位浮动布局的日子。想写文章总结一下吧，发现介绍Flexbox布局类的文章都被写烂了，各种大神写的也是生动形象，单单写一个布局用法感觉除了自己记录方便本地查并没有什么意义，于是就想到了之前在一个视频中看…

因为平时也关注网易UEDC的订阅号，前几天就看到了这么一个动效，主题是《网易云音乐2018年度听歌报告》，内容是一个人在努力蹬车因为构图简单，创意又不错，所以就试了下用SVG+CSS动画实现起来的难度，大概费时两个小时左右，效率还是蛮高的，总比用AE实现起来快的多得多，下面就捋…

直接进入正题，鼠标跟随，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样： 通常而言，CSS 负责表现，JavaScript 负责行为。而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。 当然，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CS…

你可能认为 CSS 只是一种简单地为网页设计样式的语言，但它的功能比你想象的要多得多。 从逼真的图像到甚至是视频游戏，你会惊讶地看到一个优秀的开发者可以用 CSS 做些什么。 这里有各种滤镜和特效，它们都是开源的，可以用在你自己的 web 项目中。 这些模块有的机遇 JavaS…

1. 什么是主题样式？ 相信大家对网页的主题样式功能肯定不陌生。对于一些站点，在基础样式上，开发者还会为用户提供多种主题样式以供选择。 下面就是一个主题样式功能：用户可以在右侧选择自己喜欢的主题色，从而得到一个“个性”的页面。 还有时候，我们开发了一个系统用来售卖，采购我们系统…

不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式，但是在Chrome和Opera浏览器中需要添加前缀。举个栗子： 现在，你甚至可以在边框中使用渐变。 具体的例子可以看这里，或者看这里使用的是background-clip和backgroun…

关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。 最近一个新的项目，CSS-Inspiration，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖…