学习贴《下一页就是幸福》

醉美水芙蓉 发表于 2024-11-2 20:16

本帖最后由醉美水芙蓉于 2024-11-2 20:18 编辑 <br /><br /><style>
   #tz { margin: 60px 0 30px calc(50% - 721px); width: 1280px; height: 700px; background: url('https://pic.imgdb.cn/item/6724d907d29ded1a8c8c385e.png') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative;
border-radius:32px; }
      /* 加一个CSS变量 --deg: 360deg; */
   #mysvg { --state: running; --deg: 360deg; position: absolute; left: calc(50% - 370px); top: calc(50% - 280px); width: 300px; height: 300px; animation: rot 20s linear infinite var(--state); cursor: pointer; }
   .ball { filter: drop-shadow(-10px -10px 20px darkred); transition: .4s; cursor: pointer; animation: flash .1s var(--delay) linear infinite alternate var(--state); }
   .ball:hover { r: 14; }
   #mysvg:hover { --deg: -720deg; }
   #tz::before { content: attr(data-lrc); position: absolute; right: -10px; bottom: 12px; width: 100%; height: 60px; text-align: center; font: normal 42px/60px LiSu; color: transparent; background: repeating-linear-gradient(to right, green,green,green,green, green) 50%/200px 60px; -webkit-background-clip: text; }
   @keyframes flash { to { opacity: .5; } }
   @keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="tz" data-lrc="下一页就是幸福 - 余火火">
   <audio id="aud" src="https://cccimg.com/view.php/c30ae101e2ed1e6c146e89cb7dfc6c1c.mp3" autoplay loop></audio>
   <svg id="mysvg"></svg>
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);

sc.onload = () => {
   var dr = _dr(mysvg), balls = [];
   dr.path('M210.00 150.00,286.26 199.59,195.96 188.57,222.50 275.57,160.42 209.09,124.82 292.80,120.00 201.96,38.92 243.20,93.62 170.52,5.00 150.00,93.62 129.48,38.92 56.80,120.00 98.04,124.82 7.20,160.42 90.91,222.50 24.43,195.96 111.43,286.26 100.41z', 'none','none').id('path');
   var len = path.getTotalLength();
   for(var i = 0, tt = 72; i < tt; i ++) {
            var point = path.getPointAtLength(len / tt * i);
            var color = '#' + Math.random().toString(16).substring(2,8),
                     delay = Math.random() * i * -0.1;
            dr.circle(point.x,point.y,5,color).set('class','ball').style(`--delay: ${delay}s`);
            balls.push(dr.elm);
   }
   //balls.forEach(b => b.onclick = () => {
   //    dr.svg.style.setProperty('--state', ['paused','running'][+aud.paused]);
   //    aud.paused ? aud.play() : aud.pause();
   //});
   mysvg.onclick = () => {
            mysvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
            aud.paused ? aud.play() : aud.pause();
   }
   aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
};

var curkey = 0, lrcAr = [];
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
   let result = item.match(reg);
   let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
   lrcAr.push(.trim()]);
});
};
aud.onseeked = () => curkey = 0;
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
   tz.dataset.lrc = lrcAr;
   curkey ++;
}
};
var lrc = `
下一页就是幸福-余火火

词：颜书
曲：颜书
制作人：飞花触水
编曲：季文钊/王子尚春
和声：颜书
口哨：卅卅
混音：王子尚春
企划：全幺九
出品：焕乐计划
LRC编辑：醉美水芙蓉
如果思念有生命
它能否找到你
勇敢的飞行
有没有人爱你
思念有生命
能否如影随形
风吹过街吹散了落叶
他转过身不愿再妥协
好像回到故事的起点
两个人各自有各自的结
光影交叠熟悉的地点
画面重现模糊了双眼
或许是我深陷在太多执念
不该对短暂的人期盼
别再纠结烂尾的情节
别再思念逝去的一切
再冷的夜时间会慢慢地终结
翻开这页幸福就在身边
光影交叠熟悉的地点
画面重现模糊了双眼
或许是我深陷在太多执念
不该对短暂的人期盼
别再纠结烂尾的情节
别再思念逝去的一切
再冷的夜时间会慢慢地终结
翻开这页幸福就在身边
别再纠结烂尾的情节
别再思念逝去的一切
再冷的夜时间会慢慢地终结
翻开这页幸福就在身边
谢谢欣赏！
`;
getAr(lrc);
</script>

起个网名好难 发表于 2024-11-2 20:44

https://dingyue.ws.126.net/2019/1117/f41c4906g00q12n55001ic200hs00hsg00hs00hs.gif

醉美水芙蓉 发表于 2024-11-2 20:46

起个网名好难发表于 2024-11-2 20:44

谢谢老师光临！

红影发表于 2024-11-2 21:04

这个粒子路径也是和暂停方法也和我那个学习帖子一样的呢，水芙蓉的制作很漂亮。
欣赏水芙蓉美女好帖{:4_204:}

梦油发表于 2024-11-2 21:14

真养眼！

醉美水芙蓉 发表于 2024-11-2 21:24

红影发表于 2024-11-2 21:04
这个粒子路径也是和暂停方法也和我那个学习帖子一样的呢，水芙蓉的制作很漂亮。
欣赏水芙蓉美女好帖{:4_20 ...

谢谢红影美女指点迷津！

醉美水芙蓉 发表于 2024-11-2 21:25

梦油发表于 2024-11-2 21:14
真养眼！

谢谢梦油老师光临！

红影发表于 2024-11-2 21:45

醉美水芙蓉发表于 2024-11-2 21:24
谢谢红影美女指点迷津！

不客气，问好水芙蓉美女{:4_204:}

小辣椒 发表于 2024-11-2 23:19

红影发表于 2024-11-2 21:04
这个粒子路径也是和暂停方法也和我那个学习帖子一样的呢，水芙蓉的制作很漂亮。
欣赏水芙蓉美女好帖{:4_20 ...

亲爱的，明天来得及我也是套用你的玩一个，省力{:4_205:}，路径做做太麻烦了

小辣椒 发表于 2024-11-2 23:19

欣赏水芙蓉的精彩制作

醉美水芙蓉 发表于 2024-11-3 00:18

小辣椒发表于 2024-11-2 23:19
欣赏水芙蓉的精彩制作

谢谢小辣椒支持，跟红影美女学习呢！

红影发表于 2024-11-3 10:51

小辣椒发表于 2024-11-2 23:19
亲爱的，明天来得及我也是套用你的玩一个，省力，路径做做太麻烦了

那个路径特别方便，是黑黑弄的在线路径呢{:4_173:}

梦油发表于 2024-11-3 14:48

醉美水芙蓉发表于 2024-11-2 21:25
谢谢梦油老师光临！

芙蓉朋友别客气。

页: [1]

花潮论坛's Archiver

学习贴《下一页就是幸福》