《水姻缘》（学习黑黑溶蚀和水波效果）
<style>
#mydiv {
margin: 80px 0 0 calc(50% - 593px);
width: 1100px;
height: 660px;
background: url('https://pic.imgdb.cn/item/65701a12c458853aef04b9d7.jpg') no-repeat center bottom;
box-shadow: 4px 4px 8px rgba(0,0,0,.75);
overflow: hidden;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#mydiv::before {
position: absolute;
content: '';
width: 100%;
height: 36%;
bottom: 1px;
background: inherit;
filter: url(#turb);
}
#mydiv > svg { stroke-linecap: round; }
#btnPlay { filter: hue-rotate(60deg); }
.myfilter { position: absolute; width: 0; height: 0; }
#pic { position: absolute; right: -150px; bottom: 90px; width: 700px; height: 420px; opacity: 0.75; z-index: 3; }
#hy{ position: absolute; left: 33%; top: -36px; width: 300px; height: 300px; border: 10px solid #EBFEDE; border-radius: 50%; display: grid; place-items: center; filter:url(#wavy) blur(0.5px); transform: rotateX(-45deg); pointer-events: none; --state: running; }
#hy::before, #hy::after { position: absolute; content: ''; width: 260px; height: 260px; background: url('https://pic.imgdb.cn/item/657020a1c458853aef19afaa.png') center/cover no-repeat; cursor: pointer; pointer-events: auto; animation: rot 8s infinite linear var(--state); }
#hy::after { width: 100px; height: 100px; bottom: 4px; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv"><div id="hy"></div>
<img id="pic" src="https://pic.imgdb.cn/item/657022f2c458853aef20ffcc.png" alt="" />
<svg id="svg" width="0" height="0">
<g><filter id="wavy">
<feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="2">
<animate attributeName="baseFrequency" dur="60s" values="0.02;0.05;0.02" repeatCount="indefinite"></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="30"></feDisplacementMap>
</filter></g>
</svg></div>
<svg class="myfilter">
<filter id="turb" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feTurbulence id="feturbulence" type="fractalNoise" numOctaves="3" seed="2"></feTurbulence>
<feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="20" in="SourceGraphic"></feDisplacementMap>
</filter>
</svg>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/04/03/f96997889dfd2e9b125563d480f0ebb5.mp3" autoplay loop></audio>
<script>
(function() {
let frames = 0, rad = Math.PI / 180;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
loadJs(js1, () => {
HCPlayer({
papa: '#mydiv',
lrcAr: lrcAr,
lrc_css: 'bottom: 68px;',
fs_css: 'left: -200px; background: transparent;',
player_css: 'width: 200px; height: 200px; left: 2px; bottom: 36px;',
path: 'M 100 5 Q 0 50, 100 100 T 195 100',
btn: {left: 60, top: 40},
track: {track: 'silver', prog: '#CDEDD4'},
img: {play: '', pause: ''}
});
});
loadJs(js2, () => {
H5lz({
papa: '#mydiv',
total: 10,
size: {width: 40, height: 40},
shape: {background: 'url("https://pic.imgdb.cn/item/65701de4c458853aef10fff6.png") no-repeat center/cover', borderRadius: '0'},
ani: 'toLeft',
maxTime: 30,
offset: {x: 0, y: 200},
});
});
let fewave = () => {
let bfx = 0.01, bfy = 0.1;
frames += 0.5;
bfx += 0.002 * Math.cos(frames * rad);
bfy += 0.02 * Math.sin(frames * rad);
bf = ;
feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
requestAnimationFrame(fewave);
};
fewave();
})();
</script> 想起这个溶蚀还没做过，跟水波那个放一起了玩玩。谢谢@马黑黑 的代码{:4_187:} 本来想换个轮廓路径，发现黑黑的原路径在这里挺好的，就不换了{:4_173:} 好看{:6_244:} 上面这小图叫“溶蚀”啊，做得真好，拍案叫绝！ 红影 发表于 2023-12-6 16:49
想起这个溶蚀还没做过，跟水波那个放一起了玩玩。谢谢@马黑黑 的代码
这个很漂亮。就成比较吃资源。 红影的记性真好！黑黑老师的这个代码我都不记得了。帖子精美，歌曲好听！谢谢学习了！{:4_187:} 这好有诗意的画面啊，影儿制图的创意都是很精彩的{:4_187:} 溶蚀和水波完美地融合，很有看点，影儿棒棒哒{:4_185:} 美女领导最聪明了{:4_199:} 歌儿好听，陶醉{:4_199:} 感谢美女分享，可惜我不会{:4_187:} 刚才看到，十分唯美。{:4_187:} 醉美水芙蓉 发表于 2023-12-6 17:17
路径红影美女放得真好，我以为是一只蝴蝶呢！
这个是黑黑原来的路径呢，正好和图图挺相配的{:4_173:} 幸运草 发表于 2023-12-6 17:45
好看
谢谢草儿鼓励{:4_187:} 梦油 发表于 2023-12-6 18:06
上面这小图叫“溶蚀”啊，做得真好，拍案叫绝！
好看吧，这个是黑黑原代码，我只是换了个图图{:4_173:} 马黑黑 发表于 2023-12-6 18:26
这个很漂亮。就成比较吃资源。
还好啊，没什么感觉，却很漂亮呢{:4_187:} 亦是金 发表于 2023-12-6 18:34
红影的记性真好！黑黑老师的这个代码我都不记得了。帖子精美，歌曲好听！谢谢学习了！
黑黑有很多漂亮的代码我都没做呢，正好空了就往前面翻了一下。
谢谢亦是金老师鼓励{:4_187:} 千羽 发表于 2023-12-6 19:08
这好有诗意的画面啊，影儿制图的创意都是很精彩的
不是我的创意啊，黑黑有现成的帖子呢，我只是套用啊{:4_173:}