红影 发表于 2023-3-4 10:59

飞跃迷雾（学习黑黑宇宙深处效果）


<style>
#papa {
      --state: paused;
      margin: 80px 0 0 calc(50% - 593px);
      display: grid;
      place-items: center;
      width: 1024px;
      height: 640px;
      background: lightblue url('https://pic.imgdb.cn/item/63a19e80b1fccdcd36cf5ada.jpg') no-repeat center/cover;
      box-shadow: 6px 3px 20px #000;
      user-select: none;
      position: relative;
      z-index: 1;
}
#papa::before {
      position: absolute;
      content: '';
      width: 100px;
      height: 100px;
      background: transparent;
      box-shadow: var(--boxsd);
      border-radius: 50%;
}
#mplayer {
      position: absolute;
      left:20%;top:26%;
      width: 340px;
      height: 340px;
      display: grid;
      place-items: center;
      cursor: pointer;
      transform: rotate(130deg);
}
.ball {
      margin: 2px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: transparent;
      opacity:.45;
      position: absolute;
      display: block;      
      box-shadow: -4px -4px 4px #EBCA48;
}
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 80px; top: 40px; font: bold 2.4em sans-serif; color: hsl(0, 10%, 90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(60, 90%, 50%, .45), hsla(50, 90%, 50%, .6), hsla(0, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#btnFs {
      position: absolute;
      bottom: 20px;
      width: fit-content;
      height: fit-content;
      padding: 6px;
      border-radius: 6px;
      border: 2px solid snow;
      color: snow;
      text-shadow: 1px 1px 1px #000;
      display: none;
      cursor: pointer;
}
@keyframes flash { to { box-shadow: 0 0 60px 20px #E6BD1A, -2px -2px 8px snow inset; } }
</style>

<div id="papa">
        <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
      <div id="mplayer"></div>
      <div id="btnFs">全屏观赏</div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=185498.mp3" autoplay loop></audio>
</div>

<script>
(function() {
      let total = 18, fs = false, timerId, boxTimer;
      for(i = 0; i < total; i++) {
                let span = document.createElement('span');
                span.className = 'ball';
                span.style.cssText += `                     
                        transform: rotate(${60/total*i}deg) translate(320px);
                        animation: flash ${Math.random()+0.6}s infinite alternate var(--state);
                `;
                mplayer.appendChild(span);
      }
       let flash = () => {
                clearTimeout(boxTimer);
                papa.style.setProperty('--boxsd', `
                        ${Math.random()*100 - 250}px 0 60px #${Math.random().toString(16).substr(-6)},   
                        ${Math.random()*100 - 150}px 0 60px #${Math.random().toString(16).substr(-6)}`);
                boxTimer = setTimeout(flash,620);
      };
      let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), clearTimeout(boxTimer),lrc.style.setProperty('--state','paused')) : (papa.style.setProperty('--state','running'), flash(),lrc.style.setProperty('--state','running'));
      mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
      aud.addEventListener('play', () => mState());
      aud.addEventListener('pause', () => mState());

      aud.addEventListener('ended', () => playNext());
      

      papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
      });
      btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
      document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));

        let mKey = 0, mFlag = true;
        let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
       aud.addEventListener('timeupdate', () => {

                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime >= lrcAr) {
                              if (mKey === j) showLrc(lrcAr);
                              else continue;
                        }
                }
      });
       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;
      };
       
})();
</script>

红影 发表于 2023-3-4 11:02

@马黑黑我知道怎么让那些小珠子竖排，本来想直接用在帖子里，发现让它弯点更好，可以模拟阳光的光圈了。把你的宇宙深处里的4个变幻光圈弄了两个过来。你说过“阴影不要与伪元素有交集，否则 即使是透明背景也会出现背景”。在这个帖子里感受到了，不过觉得那背景挺好，就留着了{:4_173:}

红影 发表于 2023-3-4 11:06

通过这个实验学到了不少东西，谢谢黑黑{:4_187:}

起个网名好难 发表于 2023-3-4 11:09

欣赏美帖

山边的是太阳吗

小辣椒 发表于 2023-3-4 11:23

亲爱的，学习认真，每个效果都做的这么漂亮，优秀学员{:4_178:}

小辣椒 发表于 2023-3-4 11:25

现学现用，非常棒的效果{:4_187:}

我好像还没有看见这些教程呢{:4_203:}

梦油 发表于 2023-3-4 11:34

你学得真快，好聪明！

马黑黑 发表于 2023-3-4 11:51

红影 发表于 2023-3-4 11:02
@马黑黑我知道怎么让那些小珠子竖排，本来想直接用在帖子里，发现让它弯点更好，可以模拟阳光的光圈了。 ...

根据需要设计，这样挺好呢

醉美水芙蓉 发表于 2023-3-4 12:02

醉美水芙蓉 发表于 2023-3-4 12:03

亚伦影音工作室 发表于 2023-3-4 12:59

红影 发表于 2023-3-4 11:02
@马黑黑我知道怎么让那些小珠子竖排，本来想直接用在帖子里，发现让它弯点更好，可以模拟阳光的光圈了。 ...

修改的不错！美轮美奂！

冬天的雨 发表于 2023-3-4 14:02

人间仙境的感觉{:4_170:}

雨中悄然 发表于 2023-3-4 15:07

太漂亮了，灵活叠加使用各种效果，膜拜影宝{:4_187:}

辫子哥哥 发表于 2023-3-4 15:56

感觉有妖气{:4_170:}

梦缘 发表于 2023-3-4 17:19

真贴合的图，欣赏问好！{:4_185:}

上海朝阳 发表于 2023-3-4 19:58

哎呀，这太美啦，这匹千里马把你们都造就成万里云啦

千羽 发表于 2023-3-4 20:12

变幻的彩色光圈和朦胧闪烁的串珠在陡峭的山峰上别有一番韵味，画面美美哒{:4_187:}

千羽 发表于 2023-3-4 20:13

全屏看时更美呢……{:4_181:}

红影 发表于 2023-3-4 22:23

起个网名好难 发表于 2023-3-4 11:09
欣赏美帖

山边的是太阳吗

算是吧，是无意中带出的效果，觉得挺好{:4_173:}

红影 发表于 2023-3-4 22:25

小辣椒 发表于 2023-3-4 11:23
亲爱的，学习认真，每个效果都做的这么漂亮，优秀学员

昨天去问黑黑怎样让那些珠子竖着排布，然后就想着试试，再然后想着把它弯一下，过程就这么来的{:4_173:}
页: [1] 2
查看完整版本: 飞跃迷雾（学习黑黑宇宙深处效果）