玫の玫 发表于 2025-1-3 12:51:03

【玫玫音画】陪你千山万水

<style type="text/css">
#papa { margin: 140px 0 20px calc(50% - 781px); background:#880000 url('http://www.bohann.net/data/attachment/forum/202408/04/140700qjg0zmmz6jjchc7w.jpg')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('http://www.bohann.net/data/attachment/forum/202408/04/140700qjg0zmmz6jjchc7w.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(http://www.bohann.net/data/attachment/forum/202408/04/140700qjg0zmmz6jjchc7w.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: 20px; top: 0px; width: 80px; height: 100%; writing-mode: vertical-rl; font: normal 40px/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="别让眼泪把我灌醉 - 魏佳艺"></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://s2.ananas.chaoxing.com/sv-w9/audio/aa/86/1c/0b67d75bfbc0fd65f67e601491c458ef/audio.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 = `陪你千山万水 (DJ何鹏版) - 樊少华&唐薇
词：樊少华
曲：樊少华
（玫玫音画☆不得翻唱或使用）
女：
微微的风儿 轻轻吹
吹的我呀心儿醉
男：
一路美景有你陪
远行万里也不觉累
女：
满山的花儿 那么美
蝴蝶起舞翩翩飞
男：
一路幸福的滋味
只因有你在相随
女：
我陪你呀跨千山
男：
我陪你呀走万水
合：
紧紧牵着你的手
无论天亮到天黑
女：
我陪你呀走西东
男：
我们一起闯南北
合：
只要陪在你身边
今生我决不后悔
女：
微微的风儿 轻轻吹
吹的我呀心儿醉
男：
一路美景有你陪
远行万里也不觉累
女：
满山的花儿 那么美
蝴蝶起舞翩翩飞
男：
一路幸福的滋味
只因有你在相随
女：
我陪你呀跨千山
男：
我陪你呀走万水
合：
紧紧牵着你的手
无论天亮到天黑
女：
我陪你呀走西东
男：
我们一起闯南北
合：
只要陪在你身边
今生我决不后悔
女：
微微的风儿 轻轻吹
吹的我呀心儿醉
男：
一路美景有你陪
远行万里也不觉累
女：
满山的花儿 那么美
蝴蝶起舞翩翩飞
男：
一路幸福的滋味
只因有你在相随
女：
我陪你呀跨千山
男：
我陪你呀走万水
合：
紧紧牵着你的手
无论天亮到天黑
女：
我陪你呀走西东
男：
我们一起闯南北
合：
只要陪在你身边
今生我决不后悔
`;
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>



玫の玫 发表于 2025-1-3 12:51:04

家园好多银都用这样滴代码，我也套用了一个~~还好

玫の玫 发表于 2025-1-3 12:51:05

这代码贴我电脑极速模式才能正常播放！

玫の玫 发表于 2025-1-3 12:51:06

这代码贴我电脑极速模式才能正常播放！

圊圊淥詶 发表于 2025-1-4 09:32:01

坐上周末的沙发，;P

圊圊淥詶 发表于 2025-1-4 09:36:53

动感节奏，很适合周末欣赏，
一周的疲惫都在音乐的旋律中得到舒缓。

圊圊淥詶 发表于 2025-1-4 10:05:39

美美的图图，古典与现代融合，
渐变的色彩营造出了一种梦幻般的氛围，也突出了人物的鲜艳服饰，吸引观者视线。
水彩画式的风格，线条流畅，色彩渲染自然，给人一种轻盈飘逸的感觉。
码字简洁而富有艺术感，让整体的画面风格非常协调。

点赞。

圊圊淥詶 发表于 2025-1-4 10:06:50

谢谢玫宝精心制作分享，辛苦了，
周末开心！{:1_153:}

玫の玫 发表于 2025-1-4 12:45:56

圊圊淥詶 发表于 2025-1-4 10:05
美美的图图，古典与现代融合，
渐变的色彩营造出了一种梦幻般的氛围，也突出了人物的鲜艳服饰，吸引观者视 ...

看了你精彩滴点评，我得跑回去看看这么美啊！飘飘飘~~

圊圊淥詶 发表于 2025-1-4 21:06:05

玫の玫 发表于 2025-1-4 12:45
看了你精彩滴点评，我得跑回去看看这么美啊！飘飘飘~~

我就看着你飘走~~哈哈{:S16:}
页: [1] 2
查看完整版本: 【玫玫音画】陪你千山万水