黄庆的博客 | HUANG QING BLOG

SVG-Pattern

SVG Pattern svg有两种填充方式：pattern和gradient。 pattern可以实现以指定的图案来填充一块区域。 gradient可以实现用渐变色来填充一块区域，渐变可以是线性（linearGradient）的，也可以是放射性（radialGradient）的。这块区域可以是fill，也可以是stroke。 pattern 用<pattern>定义的...

Posted by huangqing on November 18, 2018

SVG-Marker

SVG Marker 实际应用中，可能需要在线段的开始或者结尾添加一个箭头或者其他类型标记。 SVG提供了<markers>元素可以很好的实现上述功能，可以标记一条线或路径开始、中间或结束位置。 marker是一种可以连结一个或多个path、line、polyline、或polygon的顶点的标志类型。最常见的用例是绘制箭头或在输出结果的线上的标记一个（polymarker...

Posted by huangqing on November 16, 2018

SVG-Gradient

SVG渐变(SVG Gradients) SVG渐变是填充SVG图形的一种方法。通过填充渐变色，可以使SVG图形的填充色或描边色由一种颜色过渡到另一种颜色。线性渐变线性渐变是指从一种颜色到另一种颜色的线性变化。线性渐变的方向可以是水平方向或垂直方向，也可以是你指定的一个角度的方向。你也可以只为SVG图形的某一部分填充渐变色，而不是整个SVG图形。下面是一些使用线性渐变填充S...

Posted by huangqing on November 15, 2018

CSS Parallax Scrolling

CSS实现滚动视差

CSS实现滚动视差何为滚动视差视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗的能力。下面就让我们来见识一二：认识 bac...

Posted by huangqing on August 13, 2018

HTML5 Input

accept 属性值详解

<input type="file">的accept属性值详解 accept可以限制文件的上传类型，比如只上传图片文件、视频文件、音频文件.如下: audio/* 接受所有的声音文件。 video/* 接受所有的视频文件。 image/* 接受所有的图像文件。 <input type="file" name="pic" id="pic" accept="image/...

Posted by huangqing on August 10, 2018

SVG-viewbox

SVG VIEWBOX viewport 首先来了解下SVG中的viewport这个概念，简单来说viewbox就是值指SVG图片本身可视区域的大小，除了SVG本身，其它一些元素也有可视区域的限制，比如symbol、image、pattern等。在SVG中viewport主要是通过width和height属性来定义的。比如，我们定义一个width=”600”和height=”600”...

Posted by huangqing on April 19, 2018

SVG-stroke

SVG STROKE stroke 定义一条线，文本或元素轮廓颜色 stroke-width 定义一条线，文本或元素轮廓厚度 <svg viewBox="0 0 300 10"> <line x1="0" y1="0" x2="300" y2="0" stroke="black" stroke-width="10" /> </svg&...

Posted by huangqing on April 19, 2018

SVG-Mask

SVG蒙版(mask)的基础使用教程

SVG MASK 蒙版工作原理设计师或者会用Sketch、Photoshop一类设计工具的朋友应该都了解蒙版(mask)这个东西。接下来我先以Photoshop为例，简单解释蒙版的工作原理。上图中创建了两个图层——蓝色的背景和红色的前景，并且在红色前景上应用了一个蒙版（右边红圈）。正常情况下红色前景应该完全遮盖住蓝色背景，但是请注意红圈中的蒙版，在这个蒙版上画了一个黑色的矩形。...

Posted by huangqing on April 18, 2018

Math.random()

范围内的随机数、指定长度字符串

Math Math：数学对象，提供对数据的数学计算。 Math.random(); 结果为0-1间的一个随机数(包括 0,不包括 1) Math.floor(num); 参数 num 为一个数值，函数结果为num的整数部分,即返回小于等于 n 的最大整数。 Math.round(num); 参数 num 为一个数值，函数结果为 nu...

Posted by huangqing on March 21, 2018

CSS Grid Layout

使用 CSS Grid 在Web上创建二维布局

CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于父元素 (成为 Grid Container 网格容器)和其子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。如果你刚刚接触 CSS Grid 布局，那么...

Posted by huangqing on March 16, 2018

HUANG QING BLOG