阅读 1347

用SVG画一个月亮

我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛

用SVG画一个月亮

废话不多说,直接上代码

html:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>中秋月亮倒影</title>

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<svg width="0" height="0"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="sketch">
    <feTurbulence type="fractalNoise" baseFrequency=".05 .5" numOctaves="3" result="noise1"></feTurbulence>
    <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
      <animate attributeName="values" from="0" to="360" dur="1.5s" repeatCount="indefinite"/>
    </feColorMatrix>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="60" in="SourceGraphic" in2="noise2" />
  </filter>
</svg>

<div></div>

</body>
</html>
复制代码

css:

body {
  background: linear-gradient(#28f, #03a);
  height: 100vh;
}

div {
  width: 10vw;
  height: 10vw;
  background-color: #ff9;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 5vw);
  left: calc(50% - 5vw);
  -webkit-filter: url(#sketch);
          filter: url(#sketch);
  box-shadow: 0 0 0 5vw rgba(255, 255, 255, 0.15);
}
复制代码

没错 就是这个简单,下面给大家分析一下制作原理:

首先使用css画一个

重点是倒影效果的制作 我们用到的技术是SVG

什么是SVG呢?

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

SVG 使用 XML 格式定义图像。

feTurbulence

feTurbulence是湍流滤镜 可以实现云朵、大理石质感、烟雾、火焰效果等很多很酷的效果。

feTurbulence滤镜创建的图像效果采用的是Perlin湍流函数算法,可以生成Perlin Noise(Perlin噪声、柏林噪声)。

type属性值是fractalNoiseturbulence

turbulence

默认值。表示湍流、混乱。

fractalNoise

表示分形噪声。

baseFrequency的属性值的水平和垂直的噪点频率比是1:10,因此,会有类似水平拉伸的效果

属性numOctaves就表示倍频的数量,默认值是1,不能是小数,只能是整数,如果是小数会当作默认值1处理。倍频可以理解为由频率和振幅定义的噪声函数。feTurbulence滤镜效果就是通过频率增加而幅度减小的几个倍频叠加建立起来的。

feColorMatrix

色彩矩阵的滤镜,用一个的矩阵计算,將圆片的色彩重新计算后输出,便可以达到各种不同的色彩变化效果

type属性值为hueRotate表示对色相的改变,values 值表示角度,也就是色相环要旋转的角度。

animate顾名思义就是动画的意思了

feDisplacementMap

feDisplacementMap实际上是一个位置替换滤镜,就是改变元素和图形的像素位置的。

scale表示计算后的偏移值相乘的比例,scale越大,则偏移越大

xChannelSelector对应XC(x,y),表示X轴坐标使用的是哪个颜色通道进行位置偏移。颜色有RGBA四个通道,R表示red红色,G表示green绿色,B表示blue蓝色,A表示alpha可以理解为透明度。因此,xChannelSelector属性值可以是R、G、B、A中的任意一个,默认是A,基于透明度进行位置偏移。

yChannelSelectorxChannelSelector类似,只是一个是x轴(横轴)方向,一个是y轴(纵轴)方向

效果:

image-20210917173033540

文章分类
前端