
获得徽章 0
- Border-radius最多可以接收八个参数,我们可以借此来绘制不规则图形。
Demo+源码:codepen.io
一个很有用的可视化border-radius的工具:9elements.github.io
展开9102 - #视差滚动特效
(据不可靠推测) 视差滚动特效第一次出现在2014年,如今我们在很多网站上都可以看到它的身影。它的原理是通过前景与背景移动速度的差别,营造出一种奇妙的视觉体验。视差滚动一般分为两种:一种是前景和背景都动,但是前景比背景动得快(见图1);还有一种是只有前景动,背景不动(见图2)。
第一种(图1)既可以通过js实现,也可以通过css 3d transform实现。js实现的兼容性比较好,css实现的性能比较好。
第二种(图2)主要通过background-attachment: fixed实现,比较简单。
图1的Demo+源码:codepen.io
图2的Demo+源码:codepen.io
扩展阅读:keithclark.co.uk
pixelcog.github.io
展开评论49