醉美水芙蓉 发表于 2025-1-5 21:35:26

带频谱《Save the Night》

<style type="text/css">
#papa { margin: 140px 0 20px calc(50% - 781px); background:#8A2BE2 url('https://')no-repeat center/cover;width: 1400px; height: 700px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 1400px; height: 700px;position: absolute;background:url('https://bbs.cnzv.cc/up/upload/pic/12/20250105-8fd27817ac06e6d9d21d59664c319da8.jpg')no-repeat center/cover; z-index: 2;transition: 1s; -webkit-mask-image: radial-gradient(black 25% ,transparent 75%) ; transform:scale(1);}
@keyframes rotating{50%{filter:hue-rotate(0deg)contrast(110%)brightness(150%);}}
#bjbs:hover { filter: brightness(1.2);filter: hue-rotate(0deg) drop-shadow(0 0 -40px cyan); transform:scale(1.4);}

#jpp{width: 100%; height:380px;position:absolute;z-index: 4;left: 0%;bottom: 0px;mix-blend-mode: lighten; }
#jpp img{ width: 100%; height: 100%;}
#bfq{position: absolute;
width: 400px;
height: 400px;top:100px; left:10px;z-index: 80;overflow: hidden;transform:translate(0%,0%)scale(.6);}
#vinyl{position: absolute;
        left:45px;
        bottom: 50px;
       animation: spin 8slinear infinite;
        display:flex;
        align-items:center;
        justify-content:center;
        width:250px;
        height:250px;
        border-radius:100%;transition: .5s;box-shadow: 0px 0px 0px 4px #000, 0px 0px 10px 6px #fff;
        background:linear-gradient(-45deg,#333,black,#aaa, black,#333);
cursor: pointer;
}
#vinyl:before,#vinyl:after{
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:repeating-radial-gradient(circle at center,#222 4px,transparent 8px);
        border-radius:50%;
}

.label{
        width:120px;
        height:120px;
        border-radius:100%;
        z-index:1;box-shadow: 0px 0px 0px 2px #000, 0px 0px 0px 2px #000;
        background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b3eb0e5b039583e5f6f0d847f0875f88.jpg)no-repeat -50px 0px/cover;
       
}
.label:before{
        content:'';
        position:absolute;
        width:12px;
        height:12px;
        border-radius:100%;
        background-color: #fff;
        margin:auto;
        display:block;
        top:0;left:0;right:0;bottom:0;
}
@keyframes spin {to { transform: rotate(1turn); }}
#mplayer {position: absolute;
      top:30px; left:180px;z-index: 21;background: url('https://pic.imgdb.cn/item/65ffbbe89f345e8d036024a8.png')no-repeat center/150px 280px;
      width: 150px;
      height: 280px;
      cursor: pointer;
}
.pink { transform:rotate(-2deg);transform-origin: 85% 0%;}
.purple { transform-origin: 85% 0%;margin: 3px -10px;transform:rotate(-20deg);}
#tz { top:60px;left:1200px;width: 100px; height: 600px; z-index: 22; overflow: hidden; position: absolute; }
      #tz::before { content: attr(data-lrc); position: absolute; left:50px; top: 0px; width: 80px; height: 100%; writing-mode: vertical-rl; font: normal 28px/90px 微软雅黑; color: transparent; background: repeating-linear-gradient(to bottom, gold, lightgreen, snow, lightgreen, orange) 50%/80px 200px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}

</style>
<div id="papa">
<div id="bjbs"> </div>
<div id="jpp"><img id="Img" src="https://www.kumeiwp.com/wj/217203/2024/06/01/a5703c7d6f45cad192a0946dc58302c1.gif" alt="" /></div>
<div id="tz" data-lrc="Save the Night "></div>
<div id="bfq"><div id="mplayer" class="pink"title="暂停/播放" ></div>
<div id="vinyl" title="暂停/播放">
        <div class="label"></div>
</div>
</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/119471.mp3" autoplay loop></audio>
    <script>
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple'),image.play()) : (aud.pause(),mplayer.classList.add('purple'),image.stop()));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
vinyl.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple'),image.play()) : (aud.pause(),mplayer.classList.add('purple'),image.stop()));

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

bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');
</script>
<script>
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()]);
    });
};
var mState = () => {
    tz.style.setProperty('--state', ['running','paused'][+aud.paused]);

    //其它控制代码
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};

var lrc = `Save the Night - Monoir/Alexandra Stan
   
Since the weather is so blue
天空如此湛蓝
I've been dreaming about you
LRC编辑：醉美水芙蓉
我一直在想着你
I've been dreaming about
一直在想着
How to save the night
如何与你
With you
共度这夜
It will be life like oh yeah
这绝对是极好的
It will be life like oh yeah
这绝对是极好的
Since the weather is so blue
天空如此湛蓝
I've been dreaming about you
我一直在想着你
I've been dreaming about
一直在想着
How to save the night
如何与你
With you
共度这夜
Oh love is a waterfall making it beautiful
爱情就像瀑布 让它变得美丽
I feel the waterfall making it beautiful
就像瀑布 让它变得美丽
So baby
所以宝贝
It will be life like oh yeah
这绝对是极好的
It will be life like oh yeah
这绝对是极好的
It will be life like oh yeah
这绝对是极好的
It will be life like oh yeah
这绝对是极好的
It will be life like oh yeah
这绝对是极好的
It will be life like oh yeah
这绝对是极好的
谢谢欣赏！

`;
getAr(lrc);
</script>
<script>
/**/
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 洢canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            //
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      //
      var width = this.width, height = this.height;
      if (width && height) {
            // 洢
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvasС
            canvas.width = width;
            canvas.height = height;
            //
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            //
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                //
                this.removeAttribute('src');
                // canvas
                canvas.style.position = 'absolute';
                //
                this.parentElement.insertBefore(canvas, this);
                //
                this.style.opacity = '0';
                // 洢canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image= document.getElementById("Img");
</script>



klxf 发表于 2025-1-6 09:55:46

频谱很漂亮，谢谢醉美管理员精彩分享:)

醉美水芙蓉 发表于 2025-1-6 19:26:58

klxf 发表于 2025-1-6 09:55
频谱很漂亮，谢谢醉美管理员精彩分享

谢谢友友光临！
页: [1]
查看完整版本: 带频谱《Save the Night》