亚伦影音工作室 发表于 2026-4-4 18:26

局部水波和马黑老师的mp3本地读取器

本帖最后由 亚伦影音工作室 于 2026-4-5 10:32 编辑 <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: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/af402d088db55b3df20ecebb06253fb1.jpg) no-repeat center/cover;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
}

.filtered-background, .main-background {
position: absolute;
height: 100%;
width: 100%;clip-path: polygon(0% 0%, 0% 100%, 55% 100%, 55% 0, 72% 0, 72% 100%, 100% 100%, 100% 0%);
background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/af402d088db55b3df20ecebb06253fb1.jpg) no-repeat center/cover;
}

.filtered-background {
filter: url("#turbulence");
}
#player {position:absolute;top: 55%;z-index: 98;
            left: 25%;
width: 150px;
height: 150px;
display: grid;
        place-items: center;
animation: rot 8s linear infinite ;

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
        width: 30%;
        height: 30%;
display: grid;
        place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}

</style>
<div class="containe">
<div class="main-background">

</div>
<div class="filtered-background">

</div>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
   
</div>

<svgid="reflect" >
<filter id="turbulence" x="0%" y="0%" width="100%" height="100%" >
    <feTurbulence id="ripples" numOctaves="6" seed="6" baseFrequency="0.02 0.05"></feTurbulence>
    <feDisplacementMap scale="8" in="SourceGraphic"></feDisplacementMap>
      <animate xlink:href="#ripples" attributeName="baseFrequency" dur="30s" keyTimes="0;0.5;1"
values="0.02 0.05;
      0.04 0.07;
      0.02 0.05;" repeatCount="indefinite"/>
</filter>
</svg>
<audio id="aud" src="https://www.aaz.cx/plug/down.php?ac=music&lk=mp3&id=vvobcsmwn&.mp3" loop autoplay ></audio>
<script>

player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',reflect.unpauseAnimations(),photos.style.animationPlayState = 'running',photoss.style.animationPlayState = 'running') :( aud.pause(),player.style.animationPlayState = 'paused',reflect.pauseAnimations(),photos.style.animationPlayState = 'paused',photoss.style.animationPlayState = 'paused');
</script>

也曾年轻 发表于 2026-4-4 18:53

玩水波那帖倒是局部水波，而这帖整个画面都加上了扰动效果。

亚伦影音工作室 发表于 2026-4-4 19:13

也曾年轻 发表于 2026-4-4 18:53
玩水波那帖倒是局部水波，而这帖整个画面都加上了扰动效果。

脸部和身体没有水波

红影 发表于 2026-4-4 21:33

亚伦影音工作室 发表于 2026-4-4 19:13
脸部和身体没有水波

脸部和身体好像留得少了，再多留点面积，可能效果会更明显。
很漂亮的制作，欣赏亚伦老师好帖{:4_199:}

亚伦影音工作室 发表于 2026-4-5 10:12

本帖最后由 亚伦影音工作室 于 2026-4-5 10:34 编辑 <br /><br /><div style="width: 960px;height: 450px;position: absolute;MARGIN-LEFT:-200px;MARGIN-top:10px;box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 6px #880000;background:#55aa55"><iframe frameborder="0" height="450" marginheight="0" marginwidth="0" scrolling="no" src="https://bbs.cnzv.cc/mpv.php/htm-5347-1775354842.html" width="960"></iframe></div>

<div style="height: 480px;">&nbsp;</div>

页: [1]
查看完整版本: 局部水波和马黑老师的mp3本地读取器