<style>
#papa {
margin:auto;
width: 1024px;
height: 640px;
background: tan url('https://s1.ax1x.com/2023/06/14/pCuE83j.md.jpg')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;
}
css-doodle { position: absolute; }
</style>


<div id="papa">
<!-- 播放器 -->
<css-doodle grid="1" id="mplayer">
:doodle { @size: 400px; cursor: pointer; right: 430px; top: 110px; 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(DeepSkyBlue,RoyalBlue,MediumPurple);
animation: rot 6s infinite linear var(--state);
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<!-- 弧 -->
<css-doodle grid="6x1">
:doodle {  @size: 1024px 640px; margin: 20px auto; }
@size: 120px;
position: absolute;
background: linear-gradient(Snow,RoyalBlue,DeepSkyBlue);
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('M370 70 A120 120 0 1 0 370 560');
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: 10px; left:530PX; --geci: &quot; css-doodle player&quot;; --motion: cover2; --tt: 1s; }
display: grid;
place-items: center start;
:before, :after {
content: var(--geci);
color: Honeydew;
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
white-space: pre;
}
:after {
position: absolute;
width: 0;
color:RoyalBlue;
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/13928806/00/41/16/600e82baca629.mp4" autoplay="" loop="" muted=""></video>    <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/04/03/077fb0246001918ac9ef3cc83aa6a91d.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 = [[0.88,"周深 - 永恒孤独",0.8],[1.71,"作词：梅真@造梦嘉",0.9],[2.59,"作曲：邓伊伦",1.1],[3.71,"编曲 ：邓伊伦",1.6],[5.27,"弦乐监制：李朋",1.5],[6.76,"弦乐团：国际首席爱乐乐团",1.3],[8.02,"录音师：徐威",1.4],[9.46,"制作人：王嘉诚",1.3],[10.8,"出品人：王嘉诚",1.5],[12.3,"音乐总监r：王嘉诚",1.5],[13.82,"制作公司：造梦嘉音乐",1.2],[15,"音乐营销：奶瓶座",0.8],[15.81,"特别鸣谢：周深工作室",1.2],[17.02,"学习黑师优弧劣弧路径作业之四",3.8],[26,"无止境地漂流 到 黑暗森林尽头",8.6],[35.55,"风之手 把时间挽留",7.6],[48,"谁是带枪猎人 要 吞噬整个宇宙",9.2],[57.91,"光之眼 把梦穿透",7.8],[70.21,"请不要回答",2.2],[73.98,"谁眼睛渴望 装满星空",4.0],[79.75,"地球不再转动",2.8],[85.6,"你赠我小宇宙",3.0],[92.51,"在宇宙怀中",2.5],[96,"渺小地呼唤 浩瀚时空",4.7],[101.89,"世界隐隐作痛",4.1],[108.05,"剩永恒孤独",3.4],[114.69,"你却留下 爱 爱 爱",4.7],[132.5,"恒星如灯塔指引我重生",4.6],[139.71,"",29.3],[162,"无止境地漂流 到 黑暗森林尽头",8.3],[171.15,"风之手 把时间挽留",7.8],[183.78,"谁是带枪猎人 要 吞噬整个宇宙",9.0],[193.68,"光之眼 把梦穿透",7.8],[205.75,"请不要回答",2.2],[209.54,"谁眼睛渴望 装满星空",4.2],[215.21,"地球不再转动",3.0],[221.29,"你赠我小宇宙",3.3],[228.46,"在宇宙怀中",2.1],[231.91,"渺小地呼唤 浩瀚时空",4.5],[237.37,"世界隐隐作痛",4.1],[243.45,"剩永恒孤独",3.4],[249.13,"你却留下 爱 爱 爱",3.4],[268.31,"恒星如灯塔指引我重生",4.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>

前一篇: 橘子洲头代码
下一篇: 《许愿树》修正代码