论坛 › 音乐沙龙 › 天生狂花

马黑黑 发表于 2023-7-19 06:50

天生狂花

本帖最后由 马黑黑 于 2023-7-19 06:58 编辑 <br /><br /><style>
#mydiv { margin: -80px 0 0 calc(50% - 681px); width: 1200px; height: 800px; background: #333 url('https://638183.freep.cn/638183/t23/2/tukh.jpg'); box-shadow: 0 0 8px #000; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; --state: paused; }
#mydiv::before { position: absolute; content: '\1F33F'; left: 495px; top: 240px; font-size: 30px; }
#ppwrap { position: absolute; bottom: 60px; width: 80px; height: 80px; cursor: pointer; animation: rot 6s infinite linear var(--state); --deg: 360deg; }
#ppwrap::before { display: grid; place-items: center; position: absolute; content: attr(data-tt); width: 100%; height: 100%; white-space: pre; font: normal 14px sans-serif; color: lightgreen; animation: rot 6s infinite linear var(--state); --deg: -360deg; }
#lrc { position: absolute; top: 20px; left: 50%; transform: translate(-50%); font: bold 2.4em sans-serif; color: rgba(140,220,125,.85); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px rgba(0,0,0,.95)); --motion: cover2; --tt: 5s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,rgba(10,145,18,.35),rgba(20,175,50,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
.pinpu { display: grid; place-items: center end; position: absolute; right: calc(50% + 2px); top: calc(50% - 2px); width: 10px; height: 4px; transform-origin: 100% 100%; animation: ppgo var(--du) var(--dl) infinite alternate var(--state); }
.pinpu::after { content:''; position: absolute; width: 4px; height: 4px; background: lightblue; border-radius: 50%; }
.mybox { position: absolute; top: -100px; left: 50%; font-size: 50px; animation: down 8s var(--delay) infinite linear var(--state); --delay: 0s; --deg: 20deg; }
.mybox:nth-of-type(2) { --delay: -2s; --deg: -10deg; }
.mybox:nth-of-type(3) { --delay: -4s; --deg: -20deg; }
.mybox:nth-of-type(4) { --delay: -6s; --deg: 20deg; }
@keyframes ppgo { from { width: 0px; } to { width: 50px; } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
@keyframes down { to { transform: rotate(var(--deg)) translateY(900px) rotate(360deg); } }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>

<div id="mydiv">
    <div id="ppwrap" data-tt="00:00&#10;00:00"></div>
    <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
    <span class="mybox">&#127811;</span>
    <span class="mybox">&#127810;</span>
    <span class="mybox">☘️</span>
    <span class="mybox">&#127809;</span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1958040909" autoplay loop></audio>

<script>
(function(){
    let ppnum = 50, mKey = 0, mFlag = true, slip = 0;
    let lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
      !function(){ Array.from({length: ppnum}).forEach((item,key) => { item = document.createElement('span'); item.className = 'pinpu'; item.style.cssText += `background: lightgreen; transform: rotate(${360 / ppnum * key}deg) translate(-40px); --du: ${.2 + Math.random() * .2}s; --dl: -${Math.random()}s; `; ppwrap.appendChild(item); }); }();
      let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      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 showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
      let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('play', mState, false);
      aud.addEventListener('seeked', calcKey, false);
      aud.addEventListener('timeupdate', () => { ppwrap.dataset.tt = toMin(aud.currentTime) + '\n' + toMin(aud.duration); for (j = 0; j < lrcAr.length; j++) { if(aud.currentTime >= lrcAr + slip) { cKey = j; if (mKey === j) showLrc(lrcAr); else continue; } } });
      ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-7-19 06:52

本帖最后由 马黑黑 于 2023-7-19 07:01 编辑

代码分享

<style>
#mydiv { margin: -80px 0 0 calc(50% - 681px); width: 1200px; height: 800px; background: #333 url('https://638183.freep.cn/638183/t23/2/tukh.jpg'); box-shadow: 0 0 8px #000; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; --state: paused; }
#mydiv::before { position: absolute; content: '\1F33F'; left: 495px; top: 240px; font-size: 30px; }
#ppwrap { position: absolute; bottom: 60px; width: 80px; height: 80px; cursor: pointer; animation: rot 6s infinite linear var(--state); --deg: 360deg; }
#ppwrap::before { display: grid; place-items: center; position: absolute; content: attr(data-tt); width: 100%; height: 100%; white-space: pre; font: normal 14px sans-serif; color: lightgreen; animation: rot 6s infinite linear var(--state); --deg: -360deg; }
#lrc { position: absolute; top: 20px; left: 50%; transform: translate(-50%); font: bold 2.4em sans-serif; color: rgba(140,220,125,.85); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px rgba(0,0,0,.95)); --motion: cover2; --tt: 5s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,rgba(10,145,18,.35),rgba(20,175,50,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
.pinpu { display: grid; place-items: center end; position: absolute; right: calc(50% + 2px); top: calc(50% - 2px); width: 10px; height: 4px; transform-origin: 100% 100%; animation: ppgo var(--du) var(--dl) infinite alternate var(--state); }
.pinpu::after { content:''; position: absolute; width: 4px; height: 4px; background: lightblue; border-radius: 50%; }
.mybox { position: absolute; top: -100px; left: 50%; font-size: 50px; animation: down 8s var(--delay) infinite linear var(--state); --delay: 0s; --deg: 20deg; }
.mybox:nth-of-type(2) { --delay: -2s; --deg: -10deg; }
.mybox:nth-of-type(3) { --delay: -4s; --deg: -20deg; }
.mybox:nth-of-type(4) { --delay: -6s; --deg: 20deg; }
@keyframes ppgo { from { width: 0px; } to { width: 50px; } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
@keyframes down { to { transform: rotate(var(--deg)) translateY(900px) rotate(360deg); } }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>

<div id="mydiv">
    <div id="ppwrap" data-tt="00:00&#10;00:00"></div>
    <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
    <span class="mybox">&#127811;</span>
    <span class="mybox">&#127810;</span>
    <span class="mybox">☘️</span>
    <span class="mybox">&#127809;</span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1958040909" autoplay loop></audio>

<script>
(function(){
    let ppnum = 50, mKey = 0, mFlag = true, slip = 0;
    let lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
    !function(){ Array.from({length: ppnum}).forEach((item,key) => { item = document.createElement('span'); item.className = 'pinpu'; item.style.cssText += `background: lightgreen; transform: rotate(${360 / ppnum * key}deg) translate(-40px); --du: ${.2 + Math.random() * .2}s; --dl: -${Math.random()}s; `; ppwrap.appendChild(item); }); }();
    let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    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 showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
    let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
    aud.addEventListener('pause', mState, false);
    aud.addEventListener('play', mState, false);
    aud.addEventListener('seeked', calcKey, false);
    aud.addEventListener('timeupdate', () => { ppwrap.dataset.tt = toMin(aud.currentTime) + '\n' + toMin(aud.duration); for (j = 0; j < lrcAr.length; j++) { if(aud.currentTime >= lrcAr + slip) { cKey = j; if (mKey === j) showLrc(lrcAr); else continue; } } });
    ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

醉美水芙蓉 发表于 2023-7-19 07:12

醉美水芙蓉 发表于 2023-7-19 07:21

樵歌 发表于 2023-7-19 07:49

这小娃娃是个小妖精{:4_189:}

马黑黑 发表于 2023-7-19 08:08

醉美水芙蓉 发表于 2023-7-19 07:12
这个也太漂亮了吧！

嗯，菇凉长的还可以

马黑黑 发表于 2023-7-19 08:08

醉美水芙蓉 发表于 2023-7-19 07:21
美女头上一支花也是老师戴上去的吧！

是，我帮别上去的{:4_170:}

马黑黑 发表于 2023-7-19 08:09

樵歌 发表于 2023-7-19 07:49
这小娃娃是个小妖精

花精{:4_173:}

红影 发表于 2023-7-19 10:18

这些漂亮的叶子和花朵，灵动了帖子，还跟美女头上的小叶片呼应，真有趣漂亮{:4_199:}

红影 发表于 2023-7-19 10:19

图中的美女多温柔，不狂啊，咋说人家是狂花{:4_173:}

红影 发表于 2023-7-19 10:21

这首歌曲的节奏跟频谱的跳动如此和谐，还加了歌词同步。真棒{:4_199:}
正好我做了斜向圆圈频谱，黑黑做了规整的圈圈频谱，这下圈圈频谱齐全了{:4_170:}

红影 发表于 2023-7-19 10:22

仙人掌丛中的美女。那么娇嫩的肌肤，不怕扎么{:4_189:}

罗浮梦 发表于 2023-7-19 10:38

太好看了

醉美水芙蓉 发表于 2023-7-19 12:00

马黑黑 发表于 2023-7-19 13:05

醉美水芙蓉 发表于 2023-7-19 12:00
标红的是什么意思呢？

那个， &#10; ，是伪元素内容在 HTML 代码中的换行符号，多数人都不会的

马黑黑 发表于 2023-7-19 13:05

罗浮梦 发表于 2023-7-19 10:38
太好看了

感谢支持

马黑黑 发表于 2023-7-19 13:06

红影 发表于 2023-7-19 10:18
这些漂亮的叶子和花朵，灵动了帖子，还跟美女头上的小叶片呼应，真有趣漂亮

还可以一看吧

马黑黑 发表于 2023-7-19 13:06

红影 发表于 2023-7-19 10:22
仙人掌丛中的美女。那么娇嫩的肌肤，不怕扎么

所以，狂吧

马黑黑 发表于 2023-7-19 13:06

红影 发表于 2023-7-19 10:19
图中的美女多温柔，不狂啊，咋说人家是狂花

内心狂野

马黑黑 发表于 2023-7-19 13:07

红影 发表于 2023-7-19 10:21
这首歌曲的节奏跟频谱的跳动如此和谐，还加了歌词同步。真棒
正好我做了斜向圆圈频谱，黑黑做了 ...

我本想做歪斜的那个，见你做了，就换这个长得周正的

查看完整版本: 天生狂花