【十四】CSS3新特性

前言

本篇章主要讲述CSS3新特性，如svg、canvans以及动画。

面试回答

1.canvas画圆：首先获取canvas对象，设置好宽高，用getContext方法设置2d绘图，然后用arc方法进行绘制，arc的参数分别是圆心的x，y坐标、半径、以x轴为基准的起始角度以及结束角度，这里设置，0到2π即可。

知识点

1.SVG

参考博客：https://juejin.cn/post/6844903589807128590

用处

可缩放矢量图形(SVG)的一大优势是它们可以被无限缩放而没有质量损失之外。

用法

先看一下基础的标签

<svg> 包裹并定义整个矢量图。<svg> 标签之于矢量图就如同 <html> 标签之于一个 web 页面。
<line> 创建一条直线。
<polyline> 创建折线。
<rect> 创建矩形。
<ellipse> 创建圆和椭圆。
<polygon> 创建多边形。
<path> 通过指定点以及点和点之间的线来创建任意形状。
<defs> 定义一个可复用的图形。初始情况下 <defs> 里面的内容是不可见的。<defs> 标签之于矢量图就如同 <head> 标签之于一个 web 页面。
<g> 将多种形状组合起来。将组合后的形状置于 <defs> 中可以让它能够被复用。
<symbol> 类似于一个组合，但是拥有一些额外的特性。通常被置于 <defs> 标签中便于复用。
<use> 获取在 <defs> 中定义的复用对象并在 SVG 中显示出来。

<body>
  <svg width="750" height="500">
    <defs>
      <!-- x1,y1相当于起点的水平轴、垂直轴坐标，x2,y2相当于终点的水平轴、垂直轴坐标 -->
      <line x1="3" y1="3" x2="48" y2="3"></line>
      <line x1="3" y1="19" x2="65" y2="19"></line>
      <line x1="3" y1="35" x2="48" y2="35"></line>
      <line x1="3" y1="51" x2="65" y2="51"></line>
      <!--每个逗号分别分割一个点，起点、拐点、终点  -->
      <polyline points="100 3, 130 28, 100 53"></polyline>
      <!-- 矩形：x，y为起点，结合line就可以画图了 -->
      <rect x="150" y="3" width="80" height="60"></rect>
      <line x1="150" y1="20" x2="230" y2="20"></line>
      <line x1="160" y1="3" x2="160" y2="20"></line>
      <!-- cx,cy即圆心，rx即x轴的半径，ry即y轴的半径，rx与ry相同即正圆，不同则为椭圆  -->
      <ellipse cx="300" cy="50" rx="40" ry="40"></ellipse>
      <!-- 配上ployline就可以是一个播放图标了 -->
      <polygon points="290 35, 315 50, 290 65" />
      <!-- 多边形：M表示起点，L表示从上一个点到新点画一条线，z表示闭合路线，即结束。 -->
      <path
        d="
          M 25 100
          L 65 100
          L 65 140
          L 80 140
          L 45 180
          L 10 140
          L 25 140
          Z
      "
      ></path>
      <!-- 在defs里，用g标签包裹，并定义id，可以通过use复用。 -->
      <g id="leftalign">
        <!-- 左对齐图标 -->
        <line x1="3" y1="3" x2="48" y2="3"></line>
        <line x1="3" y1="19" x2="65" y2="19"></line>
        <line x1="3" y1="35" x2="48" y2="35"></line>
        <line x1="3" y1="51" x2="65" y2="51"></line>
      </g>

      <g id="rightcaret">
        <!-- 插入图标 -->
        <polyline
          points="
          3 3
          30 28
          3 53
          "
        ></polyline>
      </g>

      <g id="browser">
        <!-- 浏览器图标 -->
        <rect x="3" y="3" width="80" height="60"></rect>
        <line x1="3" y1="19" x2="83" y2="19"></line>
        <line x1="20" y1="3" x2="20" y2="17"></line>
      </g>
    </defs>
    <use href="#leftalign" x="100" y="100"></use>
    <use href="#rightcaret" x="300" y="100"></use>
    <use href="#browser" x="500" y="100"></use>
  </svg>
</body>

<style>
  body {
    margin: 0;
  }
  svg {
    stroke: #000;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
</style>

2.Canvans

具体可查询：https://www.runoob.com/jsref/dom-obj-canvas.html

用法

moveTo：将画笔移动到坐标中的某个点
lineTo：将画笔从它所在的点到另一个点用线连接，参数为结束点
stroke：绘制出通过 moveTo和 lineTo方法定义的路径
strokeStyle：设置笔触的颜色、渐变或模式
beginPath：开始一条路径，或重置当前的路径
closePath：将当前点与起点相连
fill：将画笔所圈起来的区域进行颜色的填充
arc：创建弧/曲线（用于创建圆或部分圆）
font：设置文本内容的当前字体属性。
fillText：绘制"被填充的"文本
createLinearGradient：创建线性渐变
addColorStop：设置渐变对象中的颜色和停止位置。
createRadialGradient：设置放射状/环形的渐变
fillStyle：设置填充绘画的颜色、渐变或模式。
fillRect(x,y,width,height) 实心矩形；
strokeRect(x,y,width,height) 空心矩形；
fillText( "Hello world" , 200 , 200 ) 实心文字；
strokeText( "Hello world" , 200 , 300 ) 空心文字；

<canvas
  id="canvas"
  width="300"
  height="150"
  style="border:1px solid #d3d3d3;"
></canvas>
<script>
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
  ctx.fillStyle = 'red'; /* 填充颜色 */
  ctx.fillRect(
    0,
    0,
    100,
    50
  ); /* 4个参数分别是 x y 水平方向和垂直方向,是从左顶点(0, 0)开始的, w h 是绘制的矩形的宽和高了 */
  ctx.moveTo(0, 0); /* 是线开始的坐标 参数是 x y 水平方向和垂直方向*/
  ctx.lineTo(100, 100); /* 是线条结束坐标 参数如上 */
  ctx.stroke(); /* 开始描绘线 */
  ctx.beginPath(); /* 定义绘制的是一个圆 */
  /* 
        分别有六个参数 前两个依然是 x 和 y 的是不同的是不是从绘制的图形的左顶点坐位开始的位置了,而是以圆心作为坐标
        第三个是 r 是绘制圆的半径
        第四个是起始角 从 0 度开始绘制,
        第五个是结束角，2 * Math.PI 是360度的弧度角,半圆的话是(ctx.arc(60, 60, 30, 0, 1 * Math.PI, true))
        第六个是逆时针还是顺时针 False 为顺时针，true 为逆时针。
    */
  ctx.arc(30, 30, 30, 0, 2 * Math.PI, false);
  ctx.stroke();
  // 填充颜色
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.font =
    '40px 楷体'; /* 40px 是文字的大小 后面的是文字的字体(其他参数建议查询) */
  ctx.fillText(
    '我是一段文字',
    10,
    60
  ); /* 第一个是文本的内容,后两个是 x y,最后一个是限制的文本的长度(以像素计)  */

  /* 
        创建渐变  x0    渐变开始点的 x 坐标
        y0    渐变开始点的 y 坐标
        x1    渐变结束点的 x 坐标
        y1    渐变结束点的 y 坐标 
    */
  let line = ctx.createLinearGradient(0, 0, 200, 0);

  /*
       第一个值是 介于0.0 和 1.0 之间值, 表示渐变的开始位置和结束位置
       第二个是颜色
    */
  line.addColorStop(0, 'red');
  line.addColorStop(1, 'green');
  /*填充颜色*/
  ctx.fillStyle = line;
  /* 参数分别是 x y w h 水平方向 垂直方向 宽度 和 高度*/
  ctx.fillRect(20, 20, 150, 100);

  /*
        x0    渐变的开始圆的 x 坐标
        y0    渐变的开始圆的 y 坐标
        r0    开始圆的半径
        x1    渐变的结束圆的 x 坐标
        y1    渐变的结束圆的 y 坐标
        r1    结束圆的半径
    */
  let grd = ctx.createRadialGradient(0, 0, 5, 0, 60, 100);
  grd.addColorStop(0, 'red');
  grd.addColorStop(1, 'blue');
  ctx.fillStyle = grd;
  ctx.fillRect(20, 20, 100, 80);
</script>

canvas 填充图片

<img src="../avatar.jpg" width="300" height="260" alt="avatar">
<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
    var img = document.getElementsByTagName("img")[0];
    img.onload = function() {
        /* 
            第一个规定要使用的图像、画布或视频
            第二个第三个是 x 和 y 轴的坐标
            第四个和第五个是绘制图片的大小
        */
        ctx.drawImage(img, 10, 10, 150, 100);
    } 
</script>

3.动画

属性	含义
animation（动画）	用于设置动画属性，他是一个简写的属性，包含6个属性
transition（过渡）	用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形）	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”

动画涉及这么几个属性，接下来我们一一熟悉:

animation

创建动画，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由@keyframes规则实现。

必需项：animation-name、animation-duration 和 @keyframes规则

animation简写：animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

animation 的子属性有：

animation-name：指定由 @keyframes 描述的关键帧名称。
animation-duration：设置动画一个周期的时长。
animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。

animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

值	描述
normal	以正常的方式播放动画
reverse	以相反的方向播放动画
alternate	播放动画时，奇数次（1、3、5 等）正常播放，偶数次（2、4、6 等）反向播放
alternate-reverse	播放动画时，奇数次（1、3、5 等）反向播放，偶数次（2、4、6 等）正常播放

animation-iteration-count：设置动画重复次数，可以指定infinite无限次重复动画
值描述
n 使用具体数值定义动画播放的次数，默认值为 1
infinite 表示动画无限次播放
animation-play-state：允许暂停和恢复动画。
值描述
paused 暂停动画的播放
running 正常播放动画

值	描述
n	使用具体数值定义动画播放的次数，默认值为 1
infinite	表示动画无限次播放

值	描述
paused	暂停动画的播放
running	正常播放动画

animation-timing-function：设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。

值	描述
linear	动画从开始到结束的速度是相同的
ease	默认值，动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始，并以低速结束
cubic-bezier(n, n, n, n)	使用 cubic-bezier() 函数来定义动画的播放速度，参数的取值范围为 0 到 1 之间的数值

animation-fill-mode：指定动画执行前后如何为目标元素应用

值	描述
none	不改变动画的默认行为
forwards	当动画播放完成后，保持动画最后一个关键帧中的样式
backwards	在 animation-delay 所指定的时间段内，应用动画第一个关键帧中的样式
both	同时遵循 forwards 和 backwards 的规则

@keyframes 规则：

@keyframes animationName {
    0% { 
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}

animationName：表示动画的名称；
from/0%：定义动画的开头;
percentage：定义动画的各个阶段，为百分比值，可以添加多个；
to/100%：定义动画的结尾；
properties：不同的样式属性名称，例如color、width等等。

例子：

```
<div>
  1111
</div>
<style>
  div {
    animation: fontText 3s;
  }

  @keyframes fontText {
    0% {
      color: #f00;
    }
    100% {
      color: #000;
    }
  }
</style>
```
transition
元素从一个属性(如color)的某个值(red)过渡到这个属性的另外一个值(green)，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。
transition-duration：transition效果需要指定多少秒或毫秒才能完成，如3s
transition-property：指定CSS属性的name，transition效果，如width

transition-timing-function：指定transition效果的转速曲线

值	描述	速度
linear（默认属性）	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。	匀速
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。	快-慢-慢
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。	快-快
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。	慢-慢
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。	慢-快-慢
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。	自定义

transition-delay：定义transition效果开始的时候，如1s

例子：

<div></div>
<style>
div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f40;
  transition-duration: 1s;
  transition-delay: 1s;
}
div:hover {
  height: 150px;
  width: 150px;
}
</style>

transform

transform看起来有很多属性，其实我们把常用的总结起来就是下面四个属性。

translate(移动)

值	描述
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。

rotate(旋转)

值	描述
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。

skew(扭曲)
值描述
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

值	描述
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。

scale(缩放)

值	描述
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。

例子：其中translate可以换成scale、skew、rotate

<style>
#test {
  margin-left: 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
@keyframes translate {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(100px, 100px);
  }
}
@keyframes translateX {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(100px);
  }
}
@keyframes translateY {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(100px);
  }
}

.translate {
  animation: translate 2s infinite linear;
  background-color: red;
}
.translateX {
  animation: translateX 2s infinite linear;
  background-color: green;
}
.translateY {
  animation: translateY 2s infinite linear;
  background-color: gold;
}
</style>
<body>
<div id="test" class="translate"></div>
<div id="test" class="translateX"></div>
<div id="test" class="translateY"></div>

### 最后

走过路过，不要错过，点赞、收藏、评论三连~

【十四】CSS3新特性

前言

面试回答

知识点

1.SVG

用处

用法

2.Canvans

用法

canvas 填充图片

3.动画

animation

transition

transform

驰骥

引用和评论

【二十五】模块化

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

使用CSS给标题添加书名号并超出省略

Base64编码的“暗坑”：解密失败？可能是这些原因！