心然 - 千年缘 (学习马老师水波纹点击效果）
本帖最后由 冬天的雨 于 2023-10-24 22:40 编辑 <br /><br /><style>#papa {
margin: 150px 0 0 calc(50% - 881px);
width: 1600px;
height: 866px;
background: url('https://i.mp3.wf/view.php/6546c15a23a7466f374928aec477e0fb.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
z-index: 1;
position: relative;
display: grid;
place-items: center;
}
#vid1 {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .95;
}
</style>
<div id="papa">
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/1e82a536c26830eb7de53aeb70e0ec7b_preview.mp4" autoplay="" loop="" muted="">
</div>
<audio id="aud" src="https://i.mp3.wf/view.php/8037836f6e86d5ce8969a816669ede21.mp3" autoplay loop></audio>
<script>
(function() {
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();
};
let rippleJs = 'https://638183.freep.cn/638183/web/svg/ripple-min.js',
playerJs = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js';
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
loadJs(rippleJs, () => rippleEffect(papa));
loadJs(playerJs, () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: ' left: 30%; top:90%;color:Honeydew; --bg: linear-gradient(rgba(0,128,128,.4),rgba(0,128,128,.7));',
fs_css: 'top: -1000px; background: transparent;',
player_css: `
width: 250px;
height: 250px;
right: 200px;
bottom: 200px;
background: url('') -5px 1px,
`,
path: 'm118.50001,10.23611c-45.44417,0 -82.2639,32.34392 -82.2639,72.2639s36.81973,72.2639 82.2639,72.2639s82.2639,-32.34392 82.2639,-72.2639s-36.81973,-72.2639 -82.2639,-72.2639zm-45.11246,62.76469c1.09464,-12.26738 10.68104,-20.80501 18.57572,-20.80501s17.48108,8.53763 18.57572,20.80501c0.2322,2.50593 -3.58246,3.4675 -4.94247,1.31124l-3.15124,-4.95357c-2.55416,-3.992 -6.36882,-6.29395 -10.44884,-6.29395s-7.89468,2.30195 -10.44884,6.29395l-3.15124,4.95357c-1.42635,2.15626 -5.24101,1.16555 -5.00881,-1.31124zm83.19268,35.78229c-9.45371,9.96542 -23.31916,15.6766 -38.08022,15.6766s-28.62651,-5.71118 -38.08022,-15.6766c-4.47808,-4.7496 3.6488,-10.69389 8.16005,-5.97343c7.43029,7.8383 18.31035,12.29652 29.92018,12.29652s22.48989,-4.48735 29.92018,-12.29652c4.51125,-4.72046 12.63812,1.25296 8.16005,5.97343zm2.0566,-34.47104l-3.15124,-4.95357c-2.55416,-3.992 -6.36882,-6.29395 -10.44884,-6.29395s-7.89468,2.30195 -10.44884,6.29395l-3.15124,4.95357c-1.36001,2.12712 -5.17466,1.16555 -4.94247,-1.31124c1.09464,-12.26738 10.68104,-20.80501 18.57572,-20.80501s17.48108,8.53763 18.57572,20.80501c0.19903,2.50593 -3.6488,3.4675 -5.00881,1.31124z',
btn: {left: 55, top: 170},
track: {track: 'Honeydew', prog: 'Teal'},
img: {play: 'https://xlaj.cn/assets/file/zp/20231008131321.png', pause: 'https://xlaj.cn/assets/file/zp/20231008131301.png'}
});
});
})();
</script>
<br><br><br><br><br> @马黑黑
马老师冬雨学习做一次水动效果作业 @亦是金
冬雨不会做路径，抄了你的笑脸路径，在此谢谢了 @小辣椒
小辣椒我们自己人，冬雨用了你的播放器按钮和歌曲的歌词同步制作{:4_170:}
等小辣椒回来后表扬{:4_205:} 不会作图，偷懒直接用视频背景了 冬小雨的帖子真漂亮，颜色也调得很协调。很赞{:4_199:} 这个帖子好美，冬小雨的这个帖子很完美{:4_187:} 冬天的雨 发表于 2023-10-24 22:42
@马黑黑
马老师冬雨学习做一次水动效果作业
很不错。就是呢，这个水波点击效果，页面里动态元素多了之后，它的运行有些压力 冬天的雨 发表于 2023-10-24 22:43
@亦是金
冬雨不会做路径，抄了你的笑脸路径，在此谢谢了
欣赏冬雨美帖！制作很棒！路径色调和背景色很协调的呢！{:4_176:} 欣赏！{:4_187:} 红影 发表于 2023-10-24 23:18
冬小雨的帖子真漂亮，颜色也调得很协调。很赞
美女冬雨不能和你比的，你现在是高手的，冬雨就是抄作业的{:4_170:} 红影 发表于 2023-10-24 23:24
这个帖子好美，冬小雨的这个帖子很完美
发现背景视频电脑欣赏是漂亮的，就是手机看不见{:4_203:} 醉美水芙蓉 发表于 2023-10-25 06:59
欣赏冬雨老师的精彩播放器！
谢谢美女欣赏{:4_187:} 马黑黑 发表于 2023-10-25 07:26
很不错。就是呢，这个水波点击效果，页面里动态元素多了之后，它的运行有些压力
是的呢，点击感觉有点要用力了{:4_170:}
本来是用图片的，感觉视频背景不用做图就偷懒了，现在手机还看不见背景的 亦是金 发表于 2023-10-25 15:33
欣赏冬雨美帖！制作很棒！路径色调和背景色很协调的呢！
问好亦是金大咖的，冬雨不会做路径就抄你的了{:4_170:} 焱鑫磊 发表于 2023-10-25 18:05
欣赏！
谢谢美女欣赏，好久没有看见你了，冬雨也是上来少的{:4_187:} 冬天的雨 发表于 2023-10-25 21:39
美女冬雨不能和你比的，你现在是高手的，冬雨就是抄作业的
哪里啊，我也是套用的代码啊{:4_173:} 冬天的雨 发表于 2023-10-25 21:39
发现背景视频电脑欣赏是漂亮的，就是手机看不见
我是电脑看的，非常漂亮呢{:4_187:}