|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2023-6-12 20:48 编辑
显示歌词的单元格放在第一个，这样JS传递关键帧动画变量给它才能成功。代码我已经在 外婆桥 一帖发布，这里再发一次略有改动的（基于小蝴蝶）：
- <css-doodle grid="1x5" id="mplayer">
- :doodle {
- @size: 1024px 683px;
- background: url('https://638183.freep.cn/638183/t23/2/qn.jpg');
- box-shadow: 0 0 8px #000;
- position: relative;
- margin: 30px auto;
- --geci: 'HUACHAO';
- --motion: cover2;
- --ww: 300px;
- --prog: 0;
- --tt: 1s;
- --tt1: '00:00';
- --tt2: '00:00';
- --xplace: 50%;
- --yplace: 95%;
- --color: orange;
- --state: paused;
- }
- @nth(1) {
- @size: auto 3em;
- @place: 50% 5%;
- transform: translate(-50%);
- display: grid;
- place-items: center start;
- :before, :after {
- content: var(--geci);
- width: fit-content;
- height: fit-content;
- font: bold 2em Sans-serif;
- color: #ccc;
- text-shadow: 1px 1px 2px #000;
- white-space: pre;
- }
- :after {
- position: absolute;
- white-space: pre;
- width: 0;
- color: orange;
- overflow: hidden;
- animation: var(--motion) var(--tt) linear forwards var(--state);
- }
- }
- @nth(2) {
- @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(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);
- }
- }
- @nth(4) {
- @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(5) {
- @size: 200px 113px;
- @place: 50px 44px;
- background: url('https://638183.freep.cn/638183/Pic/2022/btf.gif');
- offset-path: path('M100 100 Q510 200 924 100');
- offset-distance: 0%;
- animation: fly 40s infinite alternate var(--state);
- }
- @keyframes cover1 { from { width: 0; } to { width: 100%; } }
- @keyframes cover2 { from { width: 0; } to { width: 100%; } }
- @keyframes rot { to { transform: rotate(360deg); } }
- @keyframes fly { to { offset-distance: 100%; }}
- </css-doodle>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1393659632" autoplay="autoplay" loop="loop"></audio>
- <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.6;
- let lrcAr = [[2.04,"外婆桥",3.0],[18.08,"歌手 任然",12.9],[31.01,"乌篷点纱灯 岩上青石悄着新纹",5.1],[36.08,"喃喃细雨时 归来燕子它不等人",6.0],[42.06,"五指方扣桨 蓑衣翁正系桥下绳",6.0],[48.08,"春雨轻敛去 绣花鞋落起唢呐声",6.0],[54.03,"爆竹燃暗淡月弯弯",6.0],[60.05,"锣鼓转踏醒路长长",6.0],[66.07,"烛火晃斑驳儿时廊旁谁家白墙",7.0],[73.06,"照湿谁家闺女脸庞",5.0],[79.03,"摇啊摇 十五摇过春分就是外婆桥",6.0],[85.01,"盼啊盼 阿嬷阿嬷地甜甜叫",6.0],[91.03,"吵啊吵 米花糖挂嘴角 总是吃不饱",6.0],[97.04,"美啊美 小脚桥上翘啊翘",6.0],[117.01,"乌篷点纱灯 岩上青石悄着新纹",5.1],[122.08,"喃喃细雨时 归来燕子它不等人",6.0],[128.08,"五指方扣桨 蓑衣翁正系桥下绳",6.6],[135,"春雨轻敛去 绣花鞋落起唢呐声",5.0],[140.04,"步儿缓 踩的泪潸潸",6.0],[146.06,"穿弄堂 望去忆满满",6.0],[152.07,"石阶上 转身零落多少银铃啷啷",7.0],[159.06,"收起了多少晨与晚",5.0],[164.08,"摇啊摇 十五摇过秋分就是外婆桥",6.9],[171.02,"乐啊乐 阿嬷阿嬷地紧紧抱",6.0],[177.04,"跳啊跳 牛郎织女遥遥总是够不着",6.0],[183.06,"眨啊眨 对着它们笑啊笑",5.9],[189.05,"摇啊摇 十五摇过春分就是外婆桥",6.0],[195.07,"盼啊盼 阿嬷阿嬷地甜甜叫",6.0],[201.08,"吵啊吵 米花糖挂嘴角 总是吃不饱",6.0],[207.09,"美啊美 小脚桥上翘啊翘",7.2],];
- 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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- let showLrc = (time) => {mplayer.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');mplayer.style.setProperty('--geci', '"' + lrcAr[mKey][1] + '"');mplayer.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[1].onclick = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
- btns[2].onclick = () => aud.paused ? aud.play() : aud.pause();
- }
- })();
- </script>
|
评分
-
| 参与人数 4 | 威望 +160 |
金钱 +320 |
经验 +160 |
收起
理由
|
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 梦缘
| + 30 |
+ 60 |
+ 30 |
很给力! |
 醉美水芙蓉
| + 30 |
+ 60 |
+ 30 |
很给力! |
 樵歌
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
发表于 2023-6-12 07:41
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2023-6-12 11:47
发表于 2023-6-12 13:43
发表于 2023-6-12 16:23
