本帖最后由 花简静 于 2024-8-18 15:32 编辑
<style>
#tz { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20240612008.webp') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
#outBox { margin: auto; width: 760px; height: 200px; top:360px;border: 0px solid gray; overflow: hidden; position: relative; opacity: .65;}
#txtBox { position: absolute; top: 20px; right: 0; font: normal 40px sans-serif; text-shadow: 2px 2px 2px gray; white-space: nowrap; user-select: none; cursor: pointer; transition: 1s; }
#txtBox:hover { transform: scale(1.2); filter: drop-shadow(10px 10px 20px green); }
#lrc { position: absolute; top: 610px;left:226px; font: normal 26px sans-serif; text-shadow: 1px 1px 1px white; background: linear-gradient(to right, red, blue, green, red); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(-1px -1px 6px gray); user-select: none; animation: swear 6s linear infinite alternate var(--state);opacity: .3; }
#player { position: absolute; left: calc(50% - 660px); bottom: 300px; width: 280px; height:10px; background: linear-gradient(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: rgba(245,245,245, .8); --prg: 0%; --btnSize: 50px;opacity: .35;}
#player::before, #player::after { position: absolute; content: ''; }
#player::before { width: var(--btnSize); height: var(--btnSize); top: calc(var(--btnSize) * -1 - 40px); background: url('https://642303.freep.cn/642303/za/70ea16dce9f184a3.png') no-repeat center/cover; animation: rot 6s linear infinite var(--state);opacity: .9;}
#player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }
.vid { position: absolute; bottom: 0; width: 100%; height: 100%; left:0px;object-fit: cover; mix-blend-mode: screen; opacity: .9; pointer-events: none; }
.vid:nth-of-type(1) { position: absolute; clip-path: polygon(0 0,80% 0,80% 20%,100% 20%,100% 100%,0 100%); }
.vid:nth-of-type(2) { width: 100%; height: 100%;left:-720px; top:0px;mix-blend-mode: screen; opacity: .3; z-index: 3;border-radius: 50%;transform: rotateY(180deg);}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes swear {
from { transform: perspective(400px) rotateY(20deg); }
to { transform: perspective(400px) rotateY(-20deg); }
}
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=408332705" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/51/5b4498835a700.mp4" autoplay loop disablePictureInPicture muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/43/5b4313f540cdc.mp4" loop muted></video>
<div id="lrc">HUA CHAO PLAYER</div>
<div id="player"></div>
<div id="outBox">
<div id="txtBox"></div>
</div>
</div>
<script>
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/js2024/tube3dlrc.js';
document.body.appendChild(script);
var lrcAr = [
[0.78,"----单曲：迷雾--",1.7],
[2.45,"电影《魔宫魅影》主题曲",1.3],
[3.79,"---歌手：黄丽玲",1.6],
[5.42,"-所属专辑：迷雾",1.8],
[7.2,"---作词 : Di Wu",1.8],
[8.96,"作曲 : Zhi-Yi Chen",1.9],
[10.89,"------词：吴頔",2.7],
[13.57,"----曲：陈致逸",1.5],
[15.05,"---编曲：张晁毓",1.8],
[16.87,"学习黑师0611作品",5.5],
[22.87,"《Beyond - 午夜怨曲》",5.5],
[28.87,"-----歌词3D效果",5.5],
[39.4,"她 曾经身在何处",7.6],
[47.01,"走月色下的路",6.7],
[53.72,"执着那份在乎",8.6],
[62.35,"-----冰冷夜",4.0],
[66.35," 笼罩眉梢的雾",5.7],
[72.04,"遇到思念暖炉",7.2],
[79.21,"原来不是迷路",7.8],
[86.99,"记忆中的脸",3.7],
[90.66,"思绪在眉间",3.1],
[93.8,"看不清思念 ",3.1],
[96.9,"再见也无言",3.2],
[100.14,"鬼魅上心间 ",3.2],
[103.32,"还盼着从前",4.2],
[107.48,"---会出现",5.5],
[113,"--曾握过的手 ",2.1],
[115.06,"是否会溜走",4.0],
[119.07,"风轻轻飘过 ",3.2],
[122.22,"唱相知相逢",3.2],
[125.39,"原地的守候 ",3.2],
[128.56,"挥不去的愁",3.5],
[132.03,"也难回首",4.7],
[136.73,"",29.2],
[165.97,"她曾经身在何处",9.9],
[175.85,"走月色下的路",5.2],
[181.07,"执着那份在乎",9.1],
[190.19,"----冰冷夜 ",4.1],
[194.3,"笼罩眉梢的雾",6.0],
[200.28,"遇到思念暖炉",5.8],
[206.08,"原来不是迷路",9.4],
[215.49,"记忆中的脸 ",3.1],
[218.61,"思绪在眉间",3.2],
[221.79,"看不清思念 ",3.1],
[224.85,"再见也无言",3.3],
[228.14,"鬼魅上心间 ",3.1],
[231.19,"还盼着从前",4.1],
[235.26,"---会出现",5.6],
[240.87,"曾握过的手 ",3.0],
[243.85,"是否会溜走",3.1],
[246.98,"风轻轻飘过 ",3.0],
[250,"唱相知相逢",3.3],
[253.31,"原地的守候 ",3.2],
[256.48,"挥不去的愁",3.7],
[260.19,"--也难回首",6.9],
[267.07,"他陷入往事沉浮",9.3],
[276.4,"说不清的含糊",6.5],
[282.9,"心中落寞的苦",8.7],
[291.55,"----仰望天 ",3.6],
[295.2,"冥冥中的定数",6.2],
[301.44,"听不见那祝福",6.6],
[308.04,"被爱与恨束缚",9.1],
[317.18,"----的孤独",6]
];
var txtAr = '回赠：亲爱的柒玥，2024年6月于千山论坛。感谢凡哥提供的代码？花简静学习【黑师代码】习作。'.split(/[，。？]/);
var ani, idx = 0;
var showText = () => {
txtBox.style.color = `#${Math.random().toString(16).substring(2,8)}`;
txtBox.innerText = txtAr[idx];
var outwidth = outBox.offsetWidth, txtwidth = txtBox.offsetWidth;
var cx = outwidth / 2 - txtwidth / 2;
var fly = [
{right: `-${txtwidth}px`, top: `20px`},
{right: `${cx}px`, top: `20px`, offset: 0.25},
{right: `${cx}px`, top: `20px`},
{right: `${cx}px`, top: `80px`},
{right: `${cx}px`, top: `20px`},
{right: `${cx}px`, top: `120px`},
{right: `${cx}px`, top: `20px`, offset: 0.75},
{right: `${outwidth}px`}
];
var attr = { duration: 8000, iterations: 1 };
ani = txtBox.animate(fly,attr);
ani.onfinish = () => {
idx = (idx + 1) % (txtAr.length - 1);
showText();
}
};
showText();
txtBox.onmouseover = () => ani.pause();
txtBox.onmouseout = () => ani.play();
</script>
|
