玩水波【静态变动态】
本帖最后由 亚伦影音工作室 于 2026-4-4 14:25 编辑 <br /><br /><style>.containe{
position: relative;display: grid;place-items: center;margin: 30px 0;width: 960px;height: 500px;left: calc(50% - 81px);transform: translateX(-50%);box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;background: #000 ;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
}
.filtered-background, .main-background {
position: absolute;
height: 100%;
width: 100%;
background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/bb2020bc299b7161b91109f059f37669.jpg) no-repeat center/cover;
}
.filtered-background {
filter: url("#turbulence");
}
</style>
<div class="containe">
<div class="main-background">
</div>
<div class="filtered-background">
</div>
</div>
<svg>
<filter id="turbulence" x="25%" y="58%" width="70%" height="50%">
<feTurbulence id="ripples" numOctaves="5" seed="5" baseFrequency="0.04 0.07"></feTurbulence>
<feDisplacementMap scale="10" in="SourceGraphic"></feDisplacementMap>
<animate xlink:href="#ripples" attributeName="baseFrequency" dur="100s" keyTimes="0;0.5;1"
values="0.02 0.05;
0.04 0.07;
0.02 0.05;" repeatCount="indefinite"/>
</filter>
</svg> 这水波纹做得真漂亮，范围也是精心设置的，除了台阶浸了一些在里面，房角那里的范围正好，水波的高度也正好，再往上去，水面覆盖可以多点，但房子要泡进去了呢。
好像波动速度有点快了，再慢一点会更好{:4_187:} 欣赏亚伦老师好帖{:4_199:} 水波效果逼真，做的真好，谢谢亚伦老师精彩分享{:4_180:}
页:
[1]