CSS scroll-snap

移动端页面常用的一种滚动效果,一般是使用JavaScript,但是也可以使用CSS的scroll-snap来实现。

Scroll Snap

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proxi......

前端小阅读(一)

CSS

响应式图片,容器长宽比aspect-radio,css嵌套选择器

filter blur & filter contrast

利用伪元素+背景图的线性渐变

有时候感觉linear-gradient真是可以为所欲......

指定代码不使用lint

ESlint

可以给文件添加/* eslint-disable */,或者对某块代码禁用警告

/* eslint-disable */

alert(1);

/* eslint-enable */

/* eslint-disable no-alert, no-console */

alert(......

SVG形变动画的两种实现方式

原文:

作者:

本文是对SVG图形变换的两种实现方法的探索和对比。

我们将使用下面两个图形,并实现它们之间的平滑转换。

图形的代码:

<svg id="cups" width="100" height="1......

漂亮的网页字体与排版

原文:

展示了Google Web Fonts中一些高质量字体的使用实例,页面里没直接写字体名字,拉出来备注一下

样式

<link href='http://fonts.googleapis.com/css?family=xxxx' rel='......

使用SVG和裁剪实现文字斑点动画

原文:

作者:

大致思路是用SVG做背景,SVG text做裁切路径。使用SVG而不是用CSS裁剪图像,是因为要实现背景动画的话CSS就需要一个gif的动态图片。

首先需要创建一个由SVG图形组成的背景。这里使用椭圆形斑点的形状。需要注意的是将矢量图软件中的画板/画布大小设置......

[CSS Grid] Hogwarts ticket

CSS-Tricks推送文章里看到的用CSS Grid实现的霍格沃茨黄牛票

See the Pen by Olivia Ng

() on .

CSS Grid网格布局,使用水平和垂直的线相交形成网格,然后将元素放置在他们形成的单元格上。

使用网格布局,需要在容器元素上定义displa......