Mac 视频转gif格式

Mac上录屏可以直接使用QuickTime的屏幕录制功能,之后一般是转成gif格式使用。早些时候还导入到ps里处理,- - 现在想着觉得好费劲。

Giphy

在线处理,可以上传视频格式文件,也支持YouTube,Vimeo,GIPHY的视频链接

Gifrocket

......

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图形组成的背景。这里使用椭圆形斑点的形状。需要注意的是将矢量图软件中的画板/画布大小设置......