论坛 › 欢乐水吧 › 苏谭谭-烈酒狂沙(DJ默涵版)

亚伦影音工作室 发表于 2024-7-7 21:42

苏谭谭-烈酒狂沙(DJ默涵版)

本帖最后由 亚伦影音工作室 于 2024-9-28 11:31 编辑 <br /><br /><style type="text/css">
#papa { margin: 140px 0 20px calc(50% - 781px); background:#600000 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://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/cfd58de5938b1306934a4cba8aeaf663.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160')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(10deg)contrast(110%)brightness(150%);}}
#bjbs:hover { filter: brightness(1.2);filter: hue-rotate(0deg) drop-shadow(0 0 -40px cyan); transform:scale(1.4);}
#daojiu {position: absolute;width: 380px;height: 520px;opacity: 1; left:160px;top:30px;z-index: 6; -webkit-mask-image: radial-gradient(black 25% ,transparent 75%) ;}
#daojiu img{ width: 100%; height: 100%;}
#jpp{width: 100%; height:380px;position:absolute;z-index: 3;left: 0%;bottom: 0px;mix-blend-mode: lighten; }
#jpp img{ width: 100%; height: 100%;}
#bfq{position: absolute;
width: 400px;
height: 400px;top:300px; left:0px;z-index: 80;overflow: hidden;transform:translate(0%,0%)scale(.6);}
#vinyl{position: absolute;
        left:30px;
        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 #ccc, 0px 0px 0px 2px #ccc;
        background:url(https://img4.kuwo.cn/star/starheads/120/s3s35/54/2316071826.jpg)no-repeat 0px 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:0px; left:165px;z-index: 21;background: url('https://pic.imgdb.cn/item/6688e0dad9c307b7e9a7a3e1.png')no-repeat center/160px 320px;
      width: 160px;
      height: 320px;
      cursor: pointer;
}
.pink { transform:rotate(0deg);transform-origin: 85% 0%;}
.purple { transform-origin: 85% 0%;margin: 0px -20px;transform:rotate(-20deg);}
#tz { margin: 0px auto; bottom: 60px;width: 100%; height: 300px;position: absolute;z-index: 5;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0; width: 100%; height: 60px; text-align: center; font: normal 38px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -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);}
#bt {position: absolute; left: 1300px; top: 50px; width: 80px; height: 100%; writing-mode: vertical-rl; font: normal 35px/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);z-index: 5;}

</style>
<div id="papa">
<div id="daojiu"><img id="jiu" src="https://pic.imgdb.cn/item/668a9054d9c307b7e9556d26.gif" alt="" /></div>


<div id="bjbs"> </div>
<div id="bt">苏谭谭-烈酒狂沙(DJ默涵版) </div>
<div id="jpp"><img id="Img" src="https://pic.imgdb.cn/item/66548c78d9c307b7e9a466eb.gif" alt="" /></div>
<div id="tz" data-lrc="苏谭谭-烈酒狂沙(DJ默涵版)"></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-w7/audio/ed/13/85/a16a3bdb425f0b67d16af19bceede76e/audio.mp3" autoplay loop></audio>
    <script>
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple'),image.play(),imagee.play()) : (aud.pause(),mplayer.classList.add('purple'),image.stop(),imagee.stop()));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
vinyl.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple'),image.play(),imagee.play()) : (aud.pause(),mplayer.classList.add('purple'),image.stop(),imagee.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 = ''; imagee.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");var imagee= document.getElementById("jiu");
</script>

红影 发表于 2024-7-7 21:49

漂亮的变色频谱和背景制作。欣赏亚伦老师好帖{:4_199:}

梦油 发表于 2024-7-8 09:33

酒中自有解忧物，一醉解千愁。

老谟深虑 发表于 2024-7-8 10:47

         欣赏老师的佳作！

竹溪 发表于 2024-7-8 10:49

欣赏佳作。

小辣椒 发表于 2024-7-10 23:00

这个酒杯动图漂亮{:4_199:}

查看完整版本: 苏谭谭-烈酒狂沙(DJ默涵版)