《红 山 果》 - 安与骑兵
本帖最后由 亦是金 于 2025-12-7 22:25 编辑 <br /><br /><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://upfile.mp3.wf/view.php/4210a7c8edf7cf8b81b94947c34ce0c1.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; }
#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: 65%;
height: 65%;
top:38%;
left:52%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 3;
opacity: .2;
}
</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:30px;">《红 山 果》</span>
<span style="color:#3d46f7;"><span style="font-size:22px;"> - - 安与骑兵</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://imgs-qn.51miz.com/preview/element/00/01/25/42/E-1254242-A0EC8832.mp4" autoplay="" loop="" muted=""></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2639634949.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let rippleJs = 'https://638183.freep.cn/638183/web/svg/ripple-min.js',
js1 = 'https://upfile.mp3.wf/down.php/9ea50290e6109c5267debb6028b5d2a7.txt',
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: 250px; height: 650px;top: 48%; left: 75%;',
path: 'm119.15969,165.05097c-2.21499,1.71473 -5.82226,1.71473 -8.06889,0l-34.45891,-26.46248c-9.9991,-7.69312 -9.42953,-20.43774 1.77199,-27.52839c9.74595,-6.18694 24.26996,-5.07468 33.1932,1.78425l3.54398,2.71113l3.51234,-2.68796c8.92324,-6.8821 23.44725,-7.99436 33.1932,-1.80742c11.16988,7.09065 11.77109,19.83527 1.77199,27.52839l-34.45891,26.46248zm-91.76386,17.98151c3.73384,-2.47941 9.5561,-2.3172 13.47979,0l29.23786,17.12414c3.57563,2.10866 8.03725,3.24409 12.65708,3.24409l37.43332,0c2.78456,0 5.06283,-1.66839 5.06283,-3.70753s-2.27828,-3.70753 -5.06283,-3.70753l-24.77624,0c-5.03119,0 -9.71431,-2.52575 -10.53702,-6.16376c-1.04421,-4.63441 3.82877,-8.66635 9.9991,-8.66635l50.62833,0c8.54353,0 16.80228,2.155 23.44725,6.09425l14.71386,8.73586l17.53006,0c2.78456,0 5.06283,1.66839 5.06283,3.70753l0,22.24516c0,2.03914 -2.27828,3.70753 -5.06283,3.70753l-112.90119,0c-4.58819,0 -9.04981,-1.13543 -12.65708,-3.24409l-47.84378,-28.03818c-4.80969,-2.80382 -5.1894,-8.17973 -0.41136,-11.33113z',
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("https://www.huachaowang.com/static/image/smiley/hcbiaoqing3/202.gif") no-repeat center/cover', borderRadius: '0'},
ani: 'toLeft',
maxTime: 20,
offset: {x: -50, y: 0},
});
});
})();
</script>
</td></tr></table> 又是手上捧心的路径，粒子换成了这么可爱的表情{:4_199:} 背景图漂亮，动画点缀十分到位，动态人物也漂亮，歌曲好听。欣赏亦是金老师好帖{:4_199:} 红影 发表于 2023-10-27 20:51
又是手上捧心的路径，粒子换成了这么可爱的表情
我把手上捧心的路径翻了个面！以便把心捧给美女！{:4_189:} 红影 发表于 2023-10-27 20:52
背景图漂亮，动画点缀十分到位，动态人物也漂亮，歌曲好听。欣赏亦是金老师好帖
谢谢你的点评！我爱听！{:4_196:}祝你欣赏愉快！{:4_187:} 醉美水芙蓉 发表于 2023-10-27 21:24
欣赏老师漂亮作品！
问好水芙蓉！谢谢欣赏！{:4_187:} 亦是金 发表于 2023-10-27 21:15
我把手上捧心的路径翻了个面！以便把心捧给美女！
这个厉害了，这个是怎么翻面的呢？对.svg的图片不会调整啊。 亦是金 发表于 2023-10-27 21:16
谢谢你的点评！我爱听！祝你欣赏愉快！
其实做个漂亮的帖子还是要付出很多的，亦是金老师辛苦了{:4_187:} 本帖最后由 亦是金 于 2023-10-28 09:40 编辑
@红影这个问题挺简单的
同理，也可以将图案上下翻转，制作出另一路径。
红影 发表于 2023-10-28 00:04
这个厉害了，这个是怎么翻面的呢？对.svg的图片不会调整啊。
问好红影！回复见下面。{:4_187:} 红影 发表于 2023-10-28 00:05
其实做个漂亮的帖子还是要付出很多的，亦是金老师辛苦了
谢谢欣赏点赞！{:4_187:} @红影我想使路径旋转一定的角度，没有试做成功。不知能否利用代码，将路径偏转一定的角度来实现？代码我不熟悉，你来试试？谢谢了！{:4_187:} @红影 我瞎弄了帖子里的一段代码，竟然使路径的角度发生了偏转。特申请领导发一个大红包！{:4_196:}
亦是金 发表于 2023-10-28 09:09
@红影这个问题挺简单的
原来是这样调的，知道了，谢谢亦是金老师指点{:4_187:} 亦是金 发表于 2023-10-28 09:11
问好红影！回复见下面。
看到了，亦是金老师厉害{:4_199:} 亦是金 发表于 2023-10-28 11:19
@红影 我瞎弄了帖子里的一段代码，竟然使路径的角度发生了偏转。特申请领导发一个大红包！
...
做了这么多试验，真不容易，现在想要的效果都有了呢。红包来了{:4_194:} 亦是金 发表于 2023-10-28 09:11
问好红影！回复见下面。
图片可以旋转的，在那个网右边有个旋转的键，可以让图片旋转。就不知道得出的代码是什么样的{:4_173:} 红影 发表于 2023-10-28 14:32
做了这么多试验，真不容易，现在想要的效果都有了呢。红包来了
来领红包了！谢谢！{:4_187:} 亦是金 发表于 2023-10-28 14:48
来领红包了！谢谢！
呵呵，周日快乐啊{:4_187:}
页:
[1]
2