源码小屋

凡哥

花简静 发表于 2024-6-21 20:51
是不是整一箩筐的小钢镚，就有一箩筐的快乐。。

对，体育老师说这是对等的

凡哥

2024年6月22日 星期六

迷宫Live

<style>     @import 'https://638183.freep.cn/638183/web/css/yslrc.css';     #tz { --ox: 1px; --lrc-top: 30%; --lrc-bg: radial-gradient(cyan, white, orange) center/120px 60px; --lrc-shadow: #000; height: 567px; background: url('https://638183.freep.cn/638183/t24/3/migs.jpg') no-repeat center/cover; margin: 30px 0; }     #player { --size: 60px; left: 48%; bottom: 20px; }     .vid { height: calc(100% + 60px); mix-blend-mode: overlay; } </style>     <div id="tz" class="tz" data-lrc="HUACHAO花潮论坛欢迎您">     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2161527734" autoplay loop></audio>     <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/89/5e6708ca0b435.mp4" autoplay loop muted></video>     <img id="player" class="player" title="播放/暂停" src="https://638183.freep.cn/638183/web/svg/clover4.svg" alt="" /> </div>   <script> var sf = document.createElement('script'); sf.charset = 'utf-8'; sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js'; document.body.appendChild(sf); var lrc = `[00:00:900]陶喆&单依纯 - 迷宫Live版\n[00:24.30]打不开又关不上的聊天窗口\n[00:30.18]情话说到一半那算不算拥有\n[00:35.85]谁赤裸谁放纵引蝶招蜂\n[00:41.79]别太冲动没什么结果\n[00:47.52]不远不近的距离我们并肩走\n[00:53.28]若有似无的触碰谁偷偷脸红\n[00:58.98]谁主动谁退缩谁隔岸观火\n[01:05.01]不置可否都怪我没看懂\n[01:10.35]你的眼神太闪躲心思猜不透\n[01:13.71]走不出你心里的迷宫\n[01:16.59]牵着你的手向前又退后\n[01:19.32]是我太心急还是又犯了错\n[01:24.78]别戳破了沉默的背后\n[01:29.43]是暧昧或冲动\n[01:32.37]不敢琢磨\n[01:33.99]你一举一动是否有线索\n[01:36.87]能够让我打开这枷锁\n[01:39.81]突然的问候奇怪的冷漠\n[01:42.66]若即若离让我无法忍受\n[01:48.03]别拆穿了惯用的借口\n[01:52.62]是暧昧或冲动\n[01:55.68]只要你说\n[02:08.79]不远不近的距离我们并肩走\n[02:14.58]若有似无的触碰谁偷偷脸红\n[02:20.25]谁主动谁退缩谁隔岸观火\n[02:26.28]不置可否都怪我没看懂\n[02:34.50]你的眼神太闪躲心思猜不透\n[02:37.80]走不出你心里的迷宫\n[02:40.71]牵着你的手向前又退后\n[02:43.50]是我太心急还是又犯了错\n[02:48.99]别戳破了沉默的背后\n[02:53.40]是暧昧或冲动\n[02:56.55]不敢琢磨\n[02:58.17]你一举一动是否有线索\n[03:01.08]能够让我打开这枷锁\n[03:04.08]突然的问候奇怪的冷漠\n[03:06.96]若即若离让我无法忍受\n[03:12.24]别拆穿了惯用的借口\n[03:16.89]是暧昧或冲动`; </script>

凡哥

歌词也可以分行写，示例：

var lrc = `
[00:00:900]陶喆&单依纯 - 迷宫Live版
[00:24.30]打不开又关不上的聊天窗口
`;

注意反引号：

``

反引号的输入法：英文输入状态下，按键盘左上角自上往下的第二个键，即波浪键，上面有符号 ~· 的那个

花简静

凡哥 发表于 2024-6-22 15:52
对，体育老师说这是对等的

行哒，体育老师算得比较准，说等就等。。

花简静

凡哥 发表于 2024-6-22 15:51
比如对联
其实还有很多语言是竖着写的，比如蒙古语

长见识了。。蒙语是真的不知道。
看来竖版用的地方还不少，以后多留意留意

凡哥

花简静 发表于 2024-6-22 17:56
长见识了。。蒙语是真的不知道。
看来竖版用的地方还不少，以后多留意留意 ...

凡哥

花简静 发表于 2024-6-22 17:55
行哒，体育老师算得比较准，说等就等。。

嗯呐

凡哥

2024年6月23日 星期日

巫娜 - 竹间语

<style>     @import 'https://638183.freep.cn/638183/web/css/yslrc.css';     #tz { --ox: 90px; --lrc-top: calc(100% - 80px); --lrc-bg: radial-gradient(cyan, white, orange) center/120px 60px; width: 1080px; height: 655px; background: url('https://638183.freep.cn/638183/t24/3/vjy.jpeg') no-repeat center/cover; margin: 30px 0; }     #player { position: absolute; left: calc(50% - 110px); bottom: 20px; width: 45px; height: 45px; border-radius: 50%; border: thick groove; border-color: cyan orange yellow green; display: grid; place-items: center; transition: .8s; --opt: 1; } #player::before, #player::after { position: absolute; content: ''; width: 20px; height: 20px; background: orange; transition: .3s; cursor: pointer; }     #player::before { clip-path: polygon(0 0, 0 100%, 100% 50%); opacity: calc(var(--opt) * 1); background: cyan; }     #player::after { mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); -webkit-mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); opacity: calc(1 - var(--opt)); }     #player:hover { transform: scale(1.1); filter: invert(.3) drop-shadow(0 0 20px black); }     .vid { height: calc(100% + 60px); } </style>   <div id="tz" class="tz" data-lrc="竹间语">     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=35023486" autoplay loop></audio>     <video id="vid" class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/32/5b3f53c677460.mp4" autoplay loop muted></video>     <div id="player"></div> </div>   <script> var mState = () => {     player.style.setProperty('--opt', +aud.paused);     player.title = ['暂停','播放'][+aud.paused];     aud.paused ? vid.pause() : vid.play(); }; aud.oncanplay = aud.onplaying = aud.onpause = () => mState(); player.onclick = () => aud.paused ? aud.play() : aud.pause(); </script>

凡哥

2024年6月24日 星期一

蔡文晶 - 江湖

<style> #tz { left: 50%; transform: translateX(calc(-50% - 90px)); width: 1200px; height: 750px; overflow: hidden; background: lightblue url('https://638183.freep.cn/638183/t24/3/jlhu.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; } #tz:fullscreen li-zi { offset-path: path('M700 900 Q-400 450,960 -20'); } li-zi { position: absolute; top: 0; width: 16px; height: 16px; border-radius: 50%; background: olive; offset-path: path('M600 800 Q-400 450,860 -20'); offset-distance: 0; filter: drop-shadow(-100px -160px 0 var(--shadow)); animation: fly 20s cubic-bezier(0.17,0.86,0.73,0.14) infinite var(--state); } li-zi:hover { filter: hue-rotate(180deg) drop-shadow(-100px -160px 0 lightgreen); } #player { position: absolute; right: 180px; bottom: 180px; width: 160px; height: 160px; cursor: pointer; transition: .5s; animation: rot 8s linear infinite var(--state); } #player:hover { filter: brightness(1.2); } @keyframes fly { to { offset-distance: 100%; } } @keyframes rot { to { transform: rotate(1turn); } } </style>   <div id="tz">     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1440089299" autoplay loop></audio>     <img id="player" alt="" title="播放" src="https://638183.freep.cn/638183/web/svg/flower_3.svg" /> </div>   <script> //粒子 new Array(total = 60).fill(0).map((i,k) => {     i = document.createElement('li-zi');     i.style.cssText += `         left: ${600 / total * k + 20}px;         background-image: linear-gradient(lightgreen, #${Math.random().toString(16).substring(2,8)});         animation-delay: -${Math.random() * 20}s;         --shadow: #${Math.random().toString(16).substring(2,8)};     `;     tz.prepend(i); }); //联动函数 var mState = () => {     tz.style.setProperty('--state', ['running','paused'][+aud.paused]);     player.title = ['暂停','播放'][+aud.paused]; }; aud.oncanplay = aud.onplaying = aud.onpause = () => mState(); player.onclick = () => aud.paused ? aud.play() : aud.pause(); //全屏 var sF = document.createElement('script'); sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js'; sF.charset = 'utf-8'; document.querySelector('body').appendChild(sF); sF.onload = () => FS({     papa: '#tz',     css: 'bottom: 20px; left: 50%; transform: translateX(-50%); --color: white; --fsBg: green;', }); </script>

花简静

凡哥 发表于 2024-6-22 16:03
歌词也可以分行写，示例：

var lrc = `

老师把这个说得好详细。。
经常会有这些小符号出 点问题的。。
现在可算是能找准了。。