|
|
21楼的代码
- <style>
- outer-box {
- margin: 0 0 0 calc(50% - 593px);
- position: relative;
- display: block;
- width: 1024px;
- height: 640px;
- background: url('https://s1.ax1x.com/2023/06/10/pCV9yvQ.md.jpg')no-repeat center / cover;
- z-index: 1;
- --state: paused;
- }
- css-doodle { position: absolute; }
- </style>
- <outer-box id="papa">
- <css-doodle grid="1x6" id="mplayer">
- :doodle {
- @size: 100%;
- box-shadow: 20px auto;
- --ww: 300px;
- --prog: 0;
- --tt1: '00:00';
- --tt2: '00:00';
- --xplace: 65%;
- --yplace: 92%;
- --color: Coral;
- }
- position: absolute;
- @nth(1) {
- @size: var(--ww) 2px;
- @place: var(--xplace) var(--yplace);
- background: silver;
- :before, :after { content: ''; }
- :before {
- position: absolute;
- left: 0;
- width: var(--prog);
- height: 100%;
- background: var(--color);
- }
- :after {
- width: 80%;
- height: 10px;
- cursor: pointer;
- }
- }
- @nth(2) {
- @size: var(--ww) 20px;
- @place: var(--xplace) calc(var(--yplace) - 20px);
- :before, :after{
- position: absolute;
- width: 80%;
- height: 100%;
- color: var(--color);
- }
- :before { content: var(--tt1); }
- :after { content: var(--tt2); text-align: right; }
- }
- @nth(3) {
- @size: 60px;
- @place: var(--xplace) calc(var(--yplace) - 36px);
- cursor: pointer;
- z-index: 10;
- animation: rot 6s infinite linear var(--state);
- :after {
- content: '';
- @size: inherit;
- clip-path: @shape( fill: evenodd;
- points: 300;
- scale: .45;
- x: cos(2t) + cos(π - 7t);
- y: sin(2t) + sin(7t);
- );
- background: var(--color);
- }
- }
- @match(i ≥ 4) {
- @size: 300px 300px;
- @place: 520px 304px;
- background: url('https://img.soogif.com/eec7c8e4bca44deba45771d76e759ef0.gif');
- offset-path: path('M80 100 a240 160 0 1 0 480 0 a240 160 0 1 0 -480 0z');
- animation: fly 18s calc((@size - @i) * -6.5s) infinite linear var(--state);
- }
- @keyframes rot { to { transform: rotate(360deg); } }
- @keyframes fly { to { offset-distance: 100%; }}
- </css-doodle>
- <css-doodle grid="1" id="lrc">
- :doodle {
- @size: auto 3em;
- left: 65%;
- bottom: 2%;
- transform: translate(-50%);
- --geci: 'HUACHAO';
- --motion: cover2;
- --tt: 1s;
- }
- display: grid;
- place-items: center start;
- :before, :after {
- content: var(--geci);
- width: fit-content;
- height: fit-content;
- font: bold 1.4em Sans-serif;
- color: #ccc;
- text-shadow: 1px 1px 2px #000;
- white-space: pre;
- }
- :after {
- position: absolute;
- white-space: pre;
- width: 0;
- color: SeaGreen;
- 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>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=317416" autoplay="autoplay" loop="loop"></audio>
- </outer-box>
- <script>
- (function(){
- let script = document.createElement('script');
- script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
- document.head.appendChild(script);
- let mKey = 0, mFlag = true, slip = 0;
- let lrcAr = [[1.22,"单曲：走在阳光里",1.3],[2.52,"歌手：杨钰莹",1.5],[4,"所属专辑：月亮船",1.2],[5.17,"作词 : 韩乘光",1.4],[6.58,"作曲 : 韩成光/陈珞",1.6],[8.15,"学习黑师《鹰》贴子效果",4.3],[24,"看看蓝色天空里飘过白白的云",4.6],[30,"看看丛丛树林里露出太阳的脸",4.5],[35.69,"今天的我和今天的你敞开心怀",4.7],[41.55,"快快乐乐走进了大自然怀抱里",4.5],[47.29,"啦...啦...啦....走在阳光里",4.7],[53.13,"啦...啦...啦....世界多美丽",4.6],[58.93,"望着天空的我和你",2.4],[61.76,"自由自在的我和你",2.5],[64.8,"抛掉一切的我和你",2.4],[67.68,"走在阳光里无忧无虑",5.2],[78.68,"",6.7],[85.38,"看看碧波绿水里睡着红红的脸",4.4],[91.17,"看看悠悠花丛里舞着翩翩的蝶",4.2],[96.73,"今天的我和今天的你敞开心怀",4.9],[102.65,"快快乐乐唱一支我们最近的歌",4.5],[108.5,"啦...啦...啦....走在阳光里",4.6],[114.37,"啦...啦...啦....世界多美丽",4.6],[120.13,"望着天空的我和你",2.4],[123.06,"自由自在的我和你",2.4],[125.96,"抛掉一切的我和你",2.4],[128.87,"走在阳光里无忧无虑",5.3],[134.67,"",23.5],[158.21,"啦...啦...啦....走在阳光里",4.4],[163.83,"啦...啦...啦....世界多美丽",4.6],[169.59,"望着天空的我和你",2.5],[172.57,"自由自在的我和你",2.3],[175.46,"抛掉一切的我和你",2.5],[178.35,"走在阳光里无忧无虑",5.4]];
- let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
- let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- 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;};
- 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);};
- 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.style.setProperty('--prog', 100*aud.currentTime/aud.duration + '%');mplayer.style.setProperty('--tt1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--tt2', `'${toMin(aud.duration)}'`);});
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- aud.addEventListener('seeked', () => calcKey());
- window.onload = () => {
- let btns = mplayer.shadowRoot.querySelectorAll('cell');
- let ww = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--ww'));
- btns[2].onclick = () => aud.paused ? aud.play() : aud.pause();
- btns[0].onclick = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
- }
- })();
- </script>
|
评分
-
| 参与人数 1 | 威望 +30 |
金钱 +60 |
经验 +30 |
收起
理由
|
 南无月
| + 30 |
+ 60 |
+ 30 |
黑老师辛苦啦！ |
查看全部评分
|
楼主
显身卡
发表于 2023-6-2 22:34
发表于 2023-6-3 20:42
收到，不谢了哈。。