一只小金鱼

1. 声明 声明变量的时候，变量名前面要加两根连词线 --，声明的命名不能包含$、[、^、(、%等字符，普通字符局限于[0~9]、[a~z]、[A~Z]、下划线_和短横线-这些组合，但是可以是中文，日文或者韩文。例如： 变量的值可以为各式各样的值，包括字符串。如： 2. 使用 …

本文只挑几个属性详细说明。 大家做需求的时候有没有遇到过，设计师给的图标图片经常要换色，同一个图标在不同的场景下显示不同的颜色。 图标可以使用SVG来完成，比较适合稳定的项目迭代。也可以使用图片来制作，比较适合短期的活动页。 当图片要达到多种颜色，又希望只使用一套图时候，我们可…

使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。 clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none 默认值为 none。 其中，clip-p…

inline-size一个逻辑属性，当书写模式为水平时，它定义元素的宽度；而当writing-mode垂直模式时，它定义元素的高度。

可以看到动画的起始点是龙猫右手边的位置。如果我们想让动画从龙猫的耳朵开始动应该如何处理呢？ 这个时候需要把路径的起始点在AI或PS里做个修改。 1、选中直接选择工具。 2、在想要改成起始点的锚点位置拉一个框。 3、然后用鼠标单击一下菜单栏上面的看似一把剪刀剪断一条线的图标，表示…

PS生成的SVG会自动裁切为形状的大小，并非画布大小。啥意思呢，我们来看图： 建立的画布是600x150（实线部分），但是实际上导出的SVG高宽是形状大小（虚线部分）。 而AI生成的SVG会带 viewBox，可以对形状的大小进行自由修改。

1. 什么是SVG SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。 2. 语法 …

1. 第一个参数 第一个参数为空时默认方向为从上到下。例如： 2. 第二个参数 第二个参数为颜色 & 位置，颜色可为多个，每个颜色可写2个位置的值。 每个颜色的位置对应的是该颜色的起始过渡颜色。如： 3. 重复渐变 重复渐变用于创建重复的线性渐变 "图像"。 以及重复…

我们页面一般遇到的是单向的进度滑块，很少遇到双向的滑块。 双向滑块的场景有：左右声道的调节、明暗亮度的调节等，如头图所示。 我们利用 input range 可以实现进度的控制。那么双向可以巧用渐变的障眼法来实现。 进度条分别为50%黑色，50%蓝色。 注意，与背景不同的是，进…