- <style>
- #papa {
- margin: 0 0 0 calc(50% - 793px);
- width: 1400px;
- height: 740px;
- background: tan url('https://pan.111t.net/view.php/459a0fb983fa43158a61b26eeaed922b.gif')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: .26;
- object-fit: cover;
- pointer-events: none;
- mix-blend-mode: screen;
- }
- css-doodle { position: absolute; }
- #mydiv {
- width: 1024px;
- height: 640px;
- overflow: hidden;
- position: relative;
- margin: 30px auto;
- --opa1: 0; --opa2: 1; --bgcolor: rgba(255,255,255,.6);
- }
- .plane {
- display: block;
- width: 80px;
- height: 60px;
- left: 20px;
- top: 30px;
- background: linear-gradient(lightgreen,green,lightgreen);
- opacity: .8;
- clip-path: polygon(0 0,20% 50%,0 100%,100% 50%);
- offset-path: path('M20 30 h1004 30');
- offset-distance: 0%;
- position: absolute;
- animation: fly 40s var(--delay) infinite linear var(--state);
- --delay: 0s;
- }
- .plane:nth-of-type(2), .plane:nth-of-type(4) { --delay: -10s; }
- .plane:nth-of-type(3), {
- transform: translateY(510px);
- opacity: .6;
- }
- @keyframes fly { to { offset-distance: 100%; } }
- </style>
- <div id="papa">
- <!-- 播放器 -->
- <css-doodle grid="1" id="mplayer">
- :doodle { @size: 100px; cursor: pointer; right: 455px; top: 260px; opacity: .66;z-index: 4; }
- clip-path: @shape(
- points: 18;
- R: seq(.618, 1, 0);
- T: seq(t-.55, t, t);
- x: R * cos(T);
- y: R * sin(T);
- );
- background: linear-gradient(DeepSkyBlue,Crimson,MediumPurple);
- 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; top: 220px; left:190px; --geci: " css-doodle player"; --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:SteelBlue;
- 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>
- <div id="mydiv"><span id="btn"></span><span class="plane"></span><span class="plane"></span><span class="plane"></span><span class="plane"></span></div><video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/41/5b42b85fa5edc.mp4" autoplay="" loop="" muted=""></video> <audio id="aud" src="http://music.163.com/song/media/outer/url?id=31514406
- " autoplay="autoplay" loop="loop" muted></audio>
- </div>
- <script>(function() {
- let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
- let lrcAr = [
- [0,"王菲 - 匆匆那年 (3D环绕版)",1.0],
- [1.03,"作词：林夕",1.0],
- [2,"作曲：梁翘柏",25.1],
- [27.08,"匆匆那年我们",1.0],
- [28.1,"究竟说了几遍",1.9],
- [30.05,"再见之后再拖延",3.0],
- [33.05,"可惜谁有没有",1.0],
- [34.07,"爱过不是一场",1.9],
- [36,"七情上面的雄辩",3.0],
- [39.01,"匆匆那年我们",1.0],
- [40.03,"一时匆忙撂下",1.0],
- [41.07,"难以承受的诺言",3.0],
- [44.07,"只有等别人兑现",6.0],
- [50.03,"不怪那吻痕还",2.0],
- [52.08,"没积累成茧",3.0],
- [55.09,"拥抱着冬眠也没能",3.9],
- [59.01,"羽化再成仙",2.0],
- [61.04,"不怪这一段情",3.0],
- [64.01,"没空反复再排练",3.0],
- [67,"是岁月宽容恩赐",4.0],
- [71.03,"反悔的时间",6.0],
- [77.08,"如果再见不能红着眼",3.9],
- [81.01,"是否还能红着脸",2.1],
- [83.09,"就像那年匆促",1.9],
- [85.02,"刻下永远一起",1.0],
- [86.06,"那样美丽的谣言",3.0],
- [89.02,"如果过去还值得眷恋",3.0],
- [92.03,"别太快冰释前嫌",3.0],
- [95.02,"谁甘心就这样",3.0],
- [98,"彼此无挂也无牵",2.1],
- [100.09,"我们要互相亏欠",6.0],
- [106.05,"要不然凭何怀缅",11.0],
- [117.07,"匆匆那年我们",1.0],
- [118.09,"见过太少世面",1.9],
- [120.03,"只爱看同一张脸",3.0],
- [123.04,"那么莫名其妙",1.0],
- [124.06,"那么讨人欢喜",1.9],
- [126,"闹起来又太讨厌",2.1],
- [128.1,"相爱那年活该",1.9],
- [130.02,"匆匆因为我们",1.0],
- [131.06,"不懂顽固的诺言",3.0],
- [134.04,"只是分手的前言",6.0],
- [140.01,"不怪那天太冷",2.1],
- [142.08,"泪滴水成冰",3.0],
- [145.08,"春风也一样没",3.0],
- [148.06,"吹进凝固的照片",3.0],
- [151.05,"不怪每一个人",3.0],
- [154.01,"没能完整爱一遍",3.0],
- [157.01,"是岁月善意落下",4.0],
- [161.01,"残缺的悬念",6.1],
- [167.08,"如果再见不能红着眼",3.9],
- [171,"是否还能红着脸",2.1],
- [173.09,"就像那年匆促",1.9],
- [175.01,"刻下永远一起",1.1],
- [176.06,"那样美丽的谣言",2.9],
- [179,"如果过去还值得眷恋",3.0],
- [182.02,"别太快冰释前嫌",3.0],
- [185.01,"谁甘心就这样",2.1],
- [187.1,"彼此无挂也无牵",2.9],
- [190.03,"如果再见不能红着眼",3.0],
- [193.03,"是否还能红着脸",3.0],
- [196.03,"就像那年匆促",1.0],
- [197.06,"刻下永远一起",1.9],
- [199.01,"那样美丽的谣言",2.0],
- [201.04,"如果过去还值得眷恋",3.0],
- [204.06,"别太快冰释前嫌",3.0],
- [207.06,"谁甘心就这样",3.0],
- [210.03,"彼此无挂也无牵",3.0],
- [213.02,"我们要互相亏欠",5.1],
- [218.08,"我们要藕断丝连",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>
|
发表于 2023-6-20 09:04
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-6-20 09:38
楼主
发表于 2023-6-20 11:23
发表于 2023-6-20 11:45
发表于 2023-6-20 22:05
