|
|
楼主 |
发表于 2023-6-10 11:26
|
显示全部楼层
帖子代码
- <style>
- outer-box {
- margin: 0 0 0 calc(50% - 531px);
- position: relative;
- display: block;
- width: 900px;
- height: 598px;
- background: url('https://638183.freep.cn/638183/t23/2/dadi.jpg');
- 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: 50%;
- --yplace: 98%;
- --color: snow;
- }
- 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: 100%;
- height: 10px;
- cursor: pointer;
- }
- }
- @nth(2) {
- @size: var(--ww) 20px;
- @place: var(--xplace) calc(var(--yplace) - 20px);
- :before, :after{
- position: absolute;
- width: 100%;
- 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;
- animation: rot 6s infinite linear var(--state);
- :after {
- content: '';
- @size: inherit;
- @shape: clover 4;
- background: var(--color);
- }
- }
- @match(i ≥ 4) {
- @size: 100px 88px;
- @place: 50px 44px;
- background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
- offset-path: path('M50 44 Q500 300 900 44');
- offset-distance: 0%;
- animation: fly 10s calc((@size - @i) * -2.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: 50%;
- top: 5%;
- 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 2.4em Sans-serif;
- color: #ccc;
- text-shadow: 1px 1px 2px #000;
- white-space: pre;
- }
- :after {
- position: absolute;
- white-space: pre;
- width: 0;
- color: red;
- 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=1377467857" 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.86,"鹰 —— 编曲：马文",1.7],[20.74,"背上了行囊",1.9],[22.61,"我飞往他乡",2.2],[29.37,"沉默的兄长",1.8],[31.34,"他转过身消失在云海中",5.2],[37.86,"是不凡的本领",1.8],[40.19,"还是坚强",2.1],[44.7,"我不想多追究",5.0],[49.88,"我是一只鹰",7.0],[57.56,"黑色的光啊",3.7],[61.97,"刺痛我心脏",1.9],[67.88,"飞 飞溅的鲜血",7.0],[75.03,"我挣脱着",3.1],[79.35,"那精神枷锁",2.3],[99.36,"高级的人类",1.8],[101.18,"他太过无情",1.7],[108.03,"未知的生物",1.9],[109.96,"他不明不白地伤害着",4.1],[116.52,"是不凡的本领还是坚强",3.7],[123.37,"我不想再追究",4.5],[128.9,"我是一只鹰",6.2],[136.11,"黑色的光啊",4.2],[140.56,"刺痛我心脏",1.8],[146.42,"飞 飞溅的鲜血",6.9],[153.6,"我挣脱着",3.5],[158,"那精神枷锁",2.2],[160.47,"依同类的帮助和救援",4.3],[168.82,"我进行着残酷的争斗",7.0],[181.03,"我是一只鹰",6.2],[188.01,"黑色的光啊",4.2],[192.28,"吞噬我心脏",2.0],[198.15,"飞 飞溅的鲜血",7.2],[205.33,"我挣脱着",3.9],[209.69,"那精神枷锁……",2.7],[212.98,"制作：颜仲坤/马文",6]];
- 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>
|
|
发表于 2023-6-10 11:26
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-6-10 11:44
发表于 2023-6-10 16:07
