本帖最后由 花简静 于 2024-8-18 15:36 编辑
<style>#papa {
margin: 130px 0 30px calc(50% - 690px);
width: 1200px;
height: 1700px;
background: tan url('https://642303.freep.cn/642303/tu/0630min.webp')no-repeat center / cover; ;
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
#vid {
position: absolute;
width: 1400px;
height: 100%;
border-radius: 2%;
opacity: .66;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
transform: rotateX(180deg);
}
.xiewen {/* 斜纹文本 */
position: absolute;
width: 800px;
height: 200px;
top:1100px;
line-height: 200px;
font-family: '微软雅黑', '宋体';
font-size: 6rem;
font-weight: 900;
text-align: center;
background: LightPink linear-gradient(45deg, transparent 45%, #FF69B4 45%, #FF69B4 55%, transparent 0);
background-size: 4px 4px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #111;
}
css-doodle { position: absolute; }</style><div id="papa">
<!-- 播放器 --><css-doodle grid="1" id="mplayer">:doodle { @size: 260px; cursor: pointer; right: 470px; top: 1300px; opacity: .96;z-index: 4; }clip-path: @shape(frame: 4;points: 40;x: cos(12t)^1 * cos(15t);y: cos(12t)^1 * sin(15t););background: linear-gradient(HotPink,LavenderBlush,Snow);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }</css-doodle>
<!-- 弧 --><css-doodle grid="6x1">:doodle { @size: 1200px 1700px; margin: 20px auto; }@size: 120px;position: absolute;background: linear-gradient(Snow,HotPink,LavenderBlush);clip-path: @shape(frame: 4;points: 40;x: cos(12t)^1 * cos(15t);y: cos(12t)^1 * sin(15t););border-radius: 50%;cursor: pointer;offset-path: path('M900 900 A100 100 0 1 0 300 900');offset-distance: calc((@i - 1) * 20%);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<!-- 歌词 -->
<css-doodle id="lrc">:doodle { @size: auto 4em; z-index:5; bottom: 60px; left: 50%; transform: translate(-50%); --geci: " css-doodle player"; --motion: cover2; --tt: 1s; }display: grid;place-items: center start;:before, :after {content: var(--geci);color: Pink;font: bold 2em sans-serif;text-shadow: 1px 1px 2px #000;white-space: pre;}:after {position: absolute;width: 0;color:LavenderBlush;overflow: hidden;animation: var(--motion) var(--tt) linear forwards var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }</css-doodle>
<video id="vid" src="https://img.tukuppt.com/video_show/2916847/00/17/74/5ecdddf687cca.mp4" autoplay="" loop="" muted=""></video>
<div class="xiewen">司敏儿生日快乐！</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/04/03/cad5f04c9a8ee1bc34ea47b2436e3509.mp3" autoplay="autoplay" loop="loop"></audio></div><script>let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
[4.69,"单曲：传奇",2.2],
[9.91,"歌手：王菲",3.2],
[13.49,"作词：左右",3.2],
[16.66,"作曲：李健",2.6],
[19.3,"编曲：李健",3.0],
[22.3,"学习黑师《Recovery》多角花播放效果",4.0],
[36.52,"只是因为在人群中多看了你一眼",5.2],
[43.99,"再也没能忘掉你容颜",3.1],
[51.55,"梦想着偶然能有一天再相见",5.1],
[59,"从此我开始孤单思念",3.2],
[65.86,"想你时你在天边",3.9],
[73.07,"想你时你在眼前",4.4],
[81.21,"想你时你在脑海",3.9],
[88.82,"想你时你在心田",3.8],
[96.43,"宁愿相信我们前世有约",4.1],
[102.3,"今生的爱情故事不会再改变",5.1],
[111.26,"宁愿用这一生等你发现",4.2],
[117.38,"我一直在你身旁",2.6],
[119.99,"从未走远",3.7],
[160.08,"只是因为在人群中多看了你一眼",5.0],
[167.57,"再也没能忘掉你容颜",3.0],
[174.9,"梦想着偶然能有一天再相见",5.5],
[182.42,"从此我开始孤单思念",3.4],
[189.3,"想你时你在天边",4.2],
[196.74,"想你时你在眼前",4.4],
[204.32,"想你时你在脑海",4.2],
[211.89,"想你时你在心田",4.0],
[219.43,"宁愿相信我们前世有约",4.8],
[226.35,"今生的爱情故事不会再改变",4.7],
[234.97,"宁愿用这一生等你发现",4.1],
[241.4,"我一直在你身旁",1.8],
[243.2,"从未走远",6.9],
[250.07,"宁愿相信我们前世有约",4.0],
[256.32,"今生的爱情故事不会再改变",4.8],
[264.72,"宁愿用这一生等你发现",4.3],
[271.35,"我一直在你身旁",2.0],
[273.91,"从未走远",7.1],
[281,"只是因为在人群中多看了你一眼",5.6]
];
let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.body.appendChild(script);
//let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr[mKey][1] + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr[j][0]) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();</script>
|
