论坛 › 欢乐水吧 › css音画 永远的等你 (DJ版)【动图来源小辣椒】可控

亚伦影音工作室 发表于 2022-10-19 20:23

css音画 永远的等你 (DJ版)【动图来源小辣椒】可控

本帖最后由 亚伦影音工作室 于 2022-11-1 05:25 编辑 <br /><br /><style>
#papa { left: -230px; width: 1124px; height: 639px;background:url('https://365.tf/disk/tf/1667334896.jpg')0 0/100% 100%;display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; }
#btnplay {position: absolute;
        width: 90px;
        height: 90px;
        left: 30px;
        bottom: 0px;
        border: 2px solid #000000;
        background: url('https://365.tf/disk/tf/1667321249.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);
        mask: radial-gradient(transparent 7px,#red 0);
        -webkit-mask: radial-gradient(transparent 7px,red 0);
        border-radius: 50%;
        cursor: pointer;
        animation: rot 4s linear infinite;
        z-index: 20;
        transform: rotateX(45deg) rotateY(20deg) rotate(0deg);}
#tupian { position: absolute;
        top: 0px;
        left: 0px;
        width: 1124px;
        height: 639px;
        animation: tu 0s linear infinite;
        cursor: pointer;-webkit-mask-image: radial-gradient(black 100% ,transparent 100%);
        opacity: 1; }
@keyframes tu { 0% {opacity: 0;
                transform: scale(0.2);
        }
50% {opacity: 1;
                transform: scale(0.8);}
90% {opacity: 1;
                transform: scale(0.8);}
        100% {opacity: 0;
                transform: scale(0.8);
        }}


#mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 1124px;
        height: 639px;
        animation: fly 100s linear infinite;
        cursor: pointer;
        opacity: 1; }
#mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 1124px;
        height: 6px;
        animation: tot 80s linear infinite;
        cursor: pointer;
        opacity: 1; }

#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; top: 480px;color: #000080; font-family: 华文隶书;
        font-size: 45px;-webkit-background-clip: text; filter: drop-shadow(#ffffff 2px 0 0)drop-shadow(#ffffff 0 2px 0)drop-shadow(#ffffff -2px 0 0) drop-shadow(#ffffff 0 -2px0); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap;background: repeating-linear-gradient(275deg, #EE0C0C 0%,#E33D0C 100%);-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%; } }
@keyframes rot { 0% {
                transform: rotateX(45deg) rotateY(20deg) rotateZ(0deg);
        }

        100% {
                transform: rotateX(45deg) rotateY(20deg) rotateZ(360deg);
        }}
@keyframes fly {from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
        }

        to {
                background-position: 100px 1600px;
        }
}
@keyframes tot {from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
        }

        to {
                background-position: -1600px 300px;
        }
}

#tx { position: absolute;
        top: 0px;
        left: 0px;
        width: 1024px;
        height: 600px;
        animation: tx 0.25s linear infinite;
        cursor: pointer;
        opacity: 1; }

@keyframes tx {
to {filter:hue-rotate(360deg)contrast(100%)brightness(150%);}
}
</style>
<style>
.img_border{display:inline-block;width:1124px;height:639px;margin:0px ;position: absolute;}
.img_border #aplay{border:1px solid #000000;border-radius:0%; }
.z360z{animation: rotating 0s linear infinite;background:url('https://365.tf/disk/tf/1667273830.gif')0 0/50%50%,url('https://365.tf/disk/tf/1667336639.gif')0 0/50%50%,url('https://wx.ttt.dj/data/nfs/img/GIF.gif')0 0/100%100%;}@keyframes rotating{from {filter:hue-rotate(0deg)contrast(120%)brightness(110%);}to {filter:hue-rotate(60deg)contrast(110%)brightness(100%);}}
</style>
<div id="papa"><div id="tx">
<div class="img_border" id="aplay" style="width: 1124px; height: 639px;position: absolute;">
<img id="tupian" style="width: 100%; height: 100%;background: url()0 0/100% 100%"></div></div>
<img style="width: 100%; height: 100%;background: url('https://365.tf/disk/tf/1667349175.png')0 0/30% 40%" >
       <imgid="mpic"style="width: 100%; height: 100%;background: url('https://365.tf/disk/tf/1667349175.png')0 0/50% 70%" >
<imgid="mpicc"style="width: 100%; height: 100%;background: url('https://365.tf/disk/tf/1667349175.png')0 0/30% 40%" >
<span id="btnplay" style="animation-play-state: running;"></span>
   <span id="lrc" data-lrc="正在播放..." style="--state:running; --motion:cover1; --tt:9.1s;">正在播放...</span>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music93470833.mp3" autoplay="autoplay"></audio>

<script>
(function() {
      let mKey = 0, mFlag = true, slip = 0.5;
       let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      aud.loop = false;
      btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
      aud.addEventListener('timeupdate', () => {
                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime - slip >= lrcAr) {
                              if (mKey === j) showLrc(lrcAr);
                              else continue;
                        }
                }
      });

let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running',

lrc.style.setProperty('--state', 'running'));
      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;
      };
})();
tupian.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tupian.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tupian.style.animationPlayState = 'paused');

mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');

mpicc.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpicc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpicc.style.animationPlayState = 'paused');

tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');

</script>

<script type="text/javascript">
var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function(){document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc); </script>

小辣椒 发表于 2022-10-19 20:26

欣赏精彩制作~~{:4_187:}
我点击后画面没有了

亚伦影音工作室 发表于 2022-10-19 20:26

点击光盘即可动画音乐暂停。
动图来源于花潮小辣椒，在此感谢！
歌词没有调整！

小辣椒 发表于 2022-10-19 20:27

又试了一次。点击后画面白了

小辣椒 发表于 2022-10-19 20:28

点击停止图片会没有？点击打开又出来了了{:4_199:}

亚伦影音工作室 发表于 2022-10-19 20:31

小辣椒 发表于 2022-10-19 20:26
欣赏精彩制作~~
我点击后画面没有了

可能是图片地址前缀木有S

小辣椒 发表于 2022-10-19 20:34

亚伦影音工作室 发表于 2022-10-19 20:31
可能是图片地址前缀木有S

你直接用我地址试一下

红影 发表于 2022-10-19 20:46

漂亮，点击光盘的确动画和音乐都停止了呢。欣赏亚伦老师好帖{:4_187:}

小辣椒 发表于 2022-10-19 20:49

红影 发表于 2022-10-19 20:46
漂亮，点击光盘的确动画和音乐都停止了呢。欣赏亚伦老师好帖

动图不是停止是消失了

加林森 发表于 2022-10-19 20:51

制作得真好！{:4_199:}

醉美水芙蓉 发表于 2022-10-19 20:55

小辣椒 发表于 2022-10-19 21:27

亚伦影音工作室 发表于 2022-10-19 20:31
可能是图片地址前缀木有S
我换手机上去看看点击光盘是好的，郁闷了

相约爱晚亭 发表于 2022-10-19 21:37

欣赏精美音画佳作！

红影 发表于 2022-10-19 22:27

小辣椒 发表于 2022-10-19 20:49
动图不是停止是消失了

我点上去是停止的啊。

马黑黑 发表于 2022-10-20 07:17

动感激越，贴合帖子主题，棒棒哒

近朱者赤 发表于 2022-10-31 11:02

https://365.tf/disk/tf/1667267213.gif
网络奥妙挺多啊{:4_189:}

查看完整版本: css音画 永远的等你 (DJ版)【动图来源小辣椒】可控