当前位置：首页 > news >正文

SVG交融效果

news 2025/8/14 21:52:31

B站视频链接

【交融动画效果【渡一教育】】https://www.bilibili.com/video/BV1JxbZzXEbV?vd_source=f1bd3b5218c30adf0a002c8c937e0a27

【JS动画 | 随机大小冒泡动画特效【一起学前端】】https://www.bilibili.com/video/BV154411a74A?vd_source=f1bd3b5218c30adf0a002c8c937e0a27

代码

详见：

https://codepen.io/lsswear-the-styleful/pen/EaVweyj

https://codepen.io/lsswear-the-styleful/pen/empGLvO

解析

冒泡效果

//获取随机整数
function getRandomInt(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值
}//新建元素方法
function addbubble(){//新建元素const maxwh =100;const minwh =50;var div = document.getElementById("bubbles_div");const maxtwidth = div.offsetWidth;const mintwidth = 0;var e = document.createElement("div");e.classList.add('bubble');//改变css样式  let wh =getRandomInt(minwh,maxwh);e.style.width = wh+"px";e.style.height = wh+"px";let twidht = getRandomInt(mintwidth,maxtwidth)+"px"e.style.transform ="translate("+twidht+",0)"// e.style.animation="up 3s ease"//加入父节点div.appendChild(e);    
}//定时添加元素   
setInterval(addbubble,10)

/*父节点样式*/
.bubbles{wdith:100%;height:100%;position:relative;/*设置SVG滤镜*/filter:url(#blob);
}/*冒泡元素样式*/
.bubble{background:#123456;border-radius:1000px;width:50px;height:50px;position:absolute;bottom:0;/*设置元素动画*/animation:up 3s ease;transform:translate(10px,0);opacity:0;
}//动画
@keyframes up{ /*动画开始样式*/from{bottom:0px;opacity:1;}/*动画结束样式*/to{bottom:160%;width:0px;height:0px;opacity:1;}
}

其中父节点bubbles 和子节点bubble是浮动关系。

父节点设置position:relative，子节点设置position:absolute，意思为子节点相对于父节点浮动，设置top等都是相对于父节点。

translate用于在2D或3D空间中移动元素位置，支持X、Y、Z轴平移，translate(10px,0)即为水平移动10px，之后做冒泡效果动态设置水平移动距离。

动画中bottom:160%决定动画结束的高度，from中若设置width或height，则所有动画元素开始的宽高都相同，js中设置的宽高则无效。所以在from中未设置宽高。

冒泡效果中，一个冒泡是通过css动画实现，多个冒泡是通过js动态设置css属性实现。

交融效果

<svg ><defs><filter id="blob"><feGaussianBlurin="SourceGraphic"stdDeviation="5"result="blur"></feGaussianBlur><feColorMatrixin="blur"type="matrix"values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 -40">  </feColorMatrix></filter></defs>
</svg>

SVG参考：SVG | MDN

SVG filter:SVG filters - SVG | MDN

<feGaussianBlur> SVG通过stdDeviation中指定的量模糊输入图像。

in 输入，SourceGraphic代表原图像。
stdDeviation 定义模糊操作的标准偏差
edgeMode 决定如何根据需要使用颜色值扩展输入图像
result 输出标志

<feColorMatrix> SVG过滤器元素根据转换矩阵更改颜色。

每个像素的颜色值[R，G，B，A]是矩阵乘以一个5 × 5的颜色矩阵来创建新的颜色[R‘，G’，B‘，A’]。

in 值包括SourceGraphic， SourceAlpha, backgrounimage, backgrounalpha, FillPaint, StrokePaint，或对另一个过滤器原语的引用。
type 值包括matrix， saturation， hueRotate和luminanceToAlpha。
values type属性中设置的矩阵类型的值。

*注意

b站讲交融的视频，有一段是<svg style="dispaly:none"> 这样写是错误的。

若这样写svg的效果在页面中不体现。

查看全文

http://www.dtcms.com/a/326905.html