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

原文:

作者:

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

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

图形的代码:

<svg id="cups" width="100" height="130" viewBox="0 0 75 47" xmlns="......

漂亮的网页字体与排版

原文:

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

样式

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

Car......

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

原文:

作者:

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

首先需要创建一个由SVG图形组成的背景。这里使用椭圆形斑点的形状。需要注意的是将矢量图软件中的画板/画布大小设置成和最终效果里的viewBox相同的尺寸。(Inkscape中在文档属性下的缩放选项)

目标......

[CSS Grid] Hogwarts ticket

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

See the Pen by Olivia Ng

() on .

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

使用网格布局,需要在容器元素上定义display: grid或display: inline-grid,使用grid-template-colum......

在vue中使用chart.js

安装和引入chart.js

npm install chart.js --save

import Chart from 'chart.js'

html

<template>

<canvas id="chart"></canvas>

</template>

methods添加创建图表

......

入坑 iPad pro + Pencil + procreate 画画画

几个笔刷参数

流线 - 手抖修正

掉落 - 笔刷末端变细变淡

描边锥度 - 左右两头的尖度

动态 - 尺寸动态 - 抖动越大越类似铅笔

流线效果同手抖修正,手抖党必备;

混色效果可以调一下湿混的稀释,画个伪厚涂什么的,不管是用涂抹还是降低笔刷透明度啥的,感觉没湿混好用。

G pen起稿效果(日常临图练习),感觉也很赞,往后面描线也很好

起稿6B......

渐变图标字体

<i class="fa fa-calendar"></i>

.fa::before {

background-image: linear-gradient(90deg, #51a0fc, #d2a2e6);

background-clip: text;

color: transparent;

}

badckground-clip属性设置元素......

十个可以用ES6替代的Lodash特性

原文地址:

作者: Dan Prince

1. Map, Filter, Reduce

这些集合方法让数据转换变得简单,而且有普遍的支持性。我们还可以配合使用箭头函数,更简洁的取代Lodash中提供的这些方法。

_.map([1, 2, 3], function(n) { return n * 3; });

// [3, 6, 9]

_.reduce([1, 2, 3], func......