《 多 情 种 》 - 安与骑兵
<meta charset="UTF-8">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1969237">
<div style="width: 1200px;height: 700px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:100px;margin-LEFT: -310px;">
<style>
#papa {
margin: ; width: 1200px; height: 700px;top:-80px; LEFT: 0px;background: url('https://z4a.net/images/2023/11/06/5247.gif') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#plane1{position: absolute;left:50px;top: 180px;width: 100px; height: 100px; offset-distance: 0;offset-path: path("M0 480 Q500 480, 550 480 T1600 480");animation: move 28s linear infinite;}
#plane2{position: absolute;left:86%;top: -15%;width: 180px; height: 170px; offset-distance: 0;offset-path: path("M0 480 Q500 480, 550 480 T1600 480");animation: moves linear infinite;}
#vid1 {
position: absolute;
width: 100%;
height: 100%;
left:0%;
bottom:0%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .2;
}
#vid2 {
position: absolute;
width: 70%;
height: 50%;
top:50%;
left:30%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen; //*mix-blend-mode: screen;混合模式:滤色*//
z-index: 3;
opacity: .35;
}
</style>
<div style="position: relative; width: 500px; height: 50px; top:650px;LEFT: 1000px;z-index: 100; filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></div>
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: relative;width: 300px;height: 30px;top: -10px;LEFT: -400px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:36px;">《 多 情 种 》 </span>
<span style="color:#3d46f7;"><span style="font-size:28px;"> - - 安与骑兵</span></div>
</style>
<div id="papa">
<video id="vid1" src="https://imgs-qn.51miz.com/preview/video/00/00/15/62/V-156223-564A0B99.mp4" autoplay="" loop="" muted=""></video>
<video id="vid2" src="https://video-js.51miz.com/preview/video/00/00/17/20/V-172001-88976108.mp4" autoplay="" loop="" muted=""></video>
<img id="plane1" src="https://z4a.net/images/2023/10/31/100hei.jpg" alt="" />
<img id="plane2" src="http://www.bohann.net/static/image/smiley/erhua/007.gif" alt="" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27904071.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let rippleJs = 'https://638183.freep.cn/638183/web/svg/ripple-min.js',
js1 = 'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/js/svg_path_lrcysj.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.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(rippleJs, () => rippleEffect(papa));
loadJs(js1, () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'bottom: 20px; --bg: linear-gradient(rgba(255,140,240,.35),rgba(250,90,220,.7)); color: #eee;',
fs_css: 'transform: translate(0,-35px); background: transparent;',
player_css: 'width: 450px; height: 650px;top: 55%; left: 77%; transform: perspective(800px) rotatez(0deg)',
path: 'm117.00957,111.57031c-70.04415,0 -75.47861,54.42751 -75.47861,71.11609l0,18.96429c0,9.81402 10.14432,17.77902 22.64358,17.77902s22.64358,-7.965 22.64358,-17.77902l0,-18.96429c0,-9.81402 -10.14432,-17.77902 -22.64358,-17.77902c-4.52871,0 -8.72533,1.06674 -12.28791,2.86835c3.80412,-21.2163 17.81295,-49.09381 65.12294,-49.09381c43.71721,0 58.60159,24.22688 62.34533,49.21234a22.62546,17.7648 0 0 0 -12.52945,-2.98687c-12.49926,0 -22.64358,7.965 -22.64358,17.77902l0,18.96429c0,9.81402 10.14432,17.77902 22.64358,17.77902s22.64358,-7.965 22.64358,-17.77902l0,-18.96429c0,-45.86988 -25.72311,-71.11609 -72.45947,-71.11609zm-52.83503,60.44868c7.48748,0 13.58615,4.78849 13.58615,10.66742l0,18.96429c0,5.87893 -6.09867,10.66742 -13.58615,10.66742s-13.58615,-4.78849 -13.58615,-10.66742l0,-18.96429c0,-5.87893 6.09867,-10.66742 13.58615,-10.66742zm116.23706,29.63171c0,5.87893 -6.09867,10.66742 -13.58615,10.66742s-13.58615,-4.78849 -13.58615,-10.66742l0,-18.96429c0,-5.87893 6.09867,-10.66742 13.58615,-10.66742s13.58615,4.78849 13.58615,10.66742l0,18.96429zm-50.63906,-27.12812c-0.54387,1.50358 -2.31147,2.34866 -4.68242,2.63401c-2.08202,0.24694 -3.81562,0.3073 -5.48124,-0.55973c-2.03103,-1.10299 -2.05653,-2.93034 -0.22945,-4.08272c1.44467,-0.88898 3.4757,-1.07007 6.52649,-1.41578c0.50988,-0.06036 0.95178,-0.13719 1.32569,-0.40608c0.54387,-0.3951 0.37391,-0.22499 0.37391,-8.95564c0,-0.6146 -0.46739,-0.78472 -1.44467,-0.67497c-0.69684,0.07683 -15.78086,1.89868 -15.78086,1.89868c-0.8668,0.12073 -1.13874,0.28535 -1.13874,0.91642c0,12.87922 0.09348,12.28656 -0.21245,13.14262c-0.35692,0.99873 -1.3087,1.75052 -2.56641,2.16757c-1.42767,0.51034 -4.01107,0.73533 -5.38776,0.5707c-3.67115,-0.44449 -4.96286,-3.18276 -2.47293,-4.7522c1.44467,-0.88898 3.4757,-1.07007 6.52649,-1.41578c0.50988,-0.06036 0.95178,-0.13719 1.32569,-0.40608c0.8583,-0.63107 0.15296,-14.08098 0.4419,-14.82729c0.06798,-0.28535 0.25494,-0.5268 0.60336,-0.70789c0.35692,-0.19206 1.00277,-0.30181 1.13874,-0.30181c17.336,-2.09623 19.45201,-2.36512 19.74944,-2.36512c0.97727,-0.0439 1.53815,0.32925 1.53815,0.9658c0.017,18.90452 0.09348,17.88933 -0.15296,18.57527z',
btn: {left: 34, top: 20},
track: {track: '#f4fd05', prog: '#fb0925'},
img: {play: 'https://pic.imgdb.cn/item/65212a5ac458853aef566925.png', pause: 'https://pic.imgdb.cn/item/65212a6bc458853aef566b8e.png'}
});
});
loadJs(js2, () => {
H5lz({
papa: '#papa',
total: 5,
size: {width: 50, height: 50},
shape: {background: 'url("") no-repeat center/cover', borderRadius: '0'},
ani: 'toLeft',
maxTime: 20,
offset: {x: -50, y: 0},
});
});
})();
</script>
</td></tr></table> 亦是金老师又带来新路径，这耳机路径好漂亮{:4_187:} 动态效果也很美。欣赏亦是金老师好帖{:4_199:} 红影 发表于 2023-11-6 16:57
亦是金老师又带来新路径，这耳机路径好漂亮
问好红影！第一个看到的总是你！真好！谢谢！{:4_187:} 红影 发表于 2023-11-6 16:57
动态效果也很美。欣赏亦是金老师好帖
总能听到你的溢美拔高的夸奖！我喜欢听！{:4_196:} 醉美水芙蓉 发表于 2023-11-6 18:01
欣赏老师漂亮的路径播放器！
问好水芙蓉！谢谢欣赏！{:4_187:} 亦是金 发表于 2023-11-6 17:39
问好红影！第一个看到的总是你！真好！谢谢！
我也觉得很幸运，正好那会在线{:4_173:} 亦是金 发表于 2023-11-6 17:43
总能听到你的溢美拔高的夸奖！我喜欢听！
那个小动图和背景里的上升的心很匹配啊，这构思很棒{:4_187:} 竟然是越做越精致典雅了。比好多视屏的音乐动画强大太多！ 问好前辈，精彩连连，每个路径都不一样的制作，个个漂亮，赞的！{:4_178:} 红影 发表于 2023-11-6 20:37
我也觉得很幸运，正好那会在线
{:4_189:} 红影 发表于 2023-11-6 20:38
那个小动图和背景里的上升的心很匹配啊，这构思很棒
谢谢点评！{:4_187:} 樵歌 发表于 2023-11-6 20:40
竟然是越做越精致典雅了。比好多视屏的音乐动画强大太多！
问好樵歌！{:4_190:}谢谢欣赏点赞夸奖！ 小辣椒 发表于 2023-11-6 22:26
问好前辈，精彩连连，每个路径都不一样的制作，个个漂亮，赞的！
问好小辣椒！谢谢欣赏夸奖！{:4_187:} 亦是金 发表于 2023-11-6 23:21
问好亦是金老师，下午好{:4_204:} 亦是金 发表于 2023-11-6 23:21
谢谢点评！
太客气，应该谢谢亦是金老师带来这么路径效果，开眼界了{:4_187:} 红影 发表于 2023-11-7 15:40
问好亦是金老师，下午好
问好红影，下午好！{:4_187:} 红影 发表于 2023-11-7 15:41
太客气，应该谢谢亦是金老师带来这么路径效果，开眼界了
谢谢{:4_187:} 亦是金 发表于 2023-11-7 16:43
问好红影，下午好！
彼此彼此{:4_204:}
页:
[1]
2