论坛 › 欢乐水吧 › 西海情歌 - 降央卓玛

亚伦影音工作室 发表于 2022-10-5 05:58

西海情歌 - 降央卓玛

本帖最后由 亚伦影音工作室 于 2022-10-5 05:58 编辑 <br /><br /><style>
      #papa {
        margin: auto;
        width: 1024px;
        height: 600px;
        background: rgba(0,0,0,.45) url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c103921a0f56c06783aea56e71fd62be.JPG') no-repeat center/cover;
        margin-top: 20px;
        margin-left: -160px;
        box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000;
        display: grid;
        place-items: center;
        overflow: hidden;
        position: relative;
        z-index: 1;
}

#mplayer {
        position: absolute;
        bottom: 0;
        width: 300px;
        height: 80px;
        user-select: none;
        display: grid;
        place-items: center;
        cursor: pointer;
}

#mplayer:hover #btnwrap, #mplayer:hover {
        transform: translateY(var(--yy: -20px;));
}

#mplayer:hover #btnwrap {
        background:#0000;
-webkit-background-clip : text;
        border-radius: 0px;
        opacity: 1;
}

#btnwrap, #prog {
        position: absolute;
        display: grid;
        place-items: center;
        transition: .7s;
}

#btnwrap {
        --yy: -20px;
        width: 35px;
        height: 35px;top: 25px;
        left: 560px;
        transform: rotate(0deg);
        border: 1px solid tan;
        border-radius: 0px;

        opacity: 1;
}

#btnplay {
        width: 15px;
        height: 15px;
        transform: translateX(3px);
        background: #cccccc;
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

#btnpause {
        width: 2px;
        height: 15px;
        border-style: solid;
        border-width: 0px 3px;
        border-color: transparent #cccccc;
        display: none;
}

#prog {
        --yy: 40px;
        width: 750px;
        height: 2px;
        border-radius: 0px;
        background: #0000;
        font: normal 15px / 36px sans-serif;
        color: #ffffff;
       
        opacity: .8;
}

#lrcwrap {
        position: absolute;
        top: 480px;
        font-family: 华文隶书;
        font-size: 45px;
}

#lrc1, #lrc2 {
        width: 100%;
        height: 100%;
        color: #ffffff;
        white-space: nowrap;
}

#lrc1 {
        width: 100%;
        height: 100%;
        color: #ffff00;
        white-space: nowrap;
        filter: drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
}

#lrc2 {
        position: absolute;
        top: 0px;
        left: 0px;
        color: #880000;
        overflow: hidden;
        filter: drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}

#mpic {
        position: absolute;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1024px;
        height: 600px;
        animation: rote 10s linear infinite;
        cursor: pointer;
        opacity: 0.5;
}

@keyframes rote {
        0%{
      background-position: 0% 0%;
    }
    100%{
      background-position: 600% 600%;filter:hue-rotate(360deg)
    }
}

#mpic1 {
        position: absolute;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1024px;
        height: 600px;
        animation: rotet 10s linear infinite;
        cursor: pointer;
        opacity: 1;
}

@keyframes rotet {
       0%{
      background-position: 0% 0%;
    }
    100%{opacity: 0;
      background-position: 600% 1600%;filter:hue-rotate(360deg)
    }
}


@keyframes mov1 {
        from {
                width: 0%;
        }

        to {
                width: 100%;
        }
}

@keyframes mov2 {
        from {
                width: 0%;
        }

        to {
                width: 100%;
        }
}

#disc {
        position: absolute;
        width: 90px;
        height: 90px;
        left: 30px;
        bottom: 0px;
        border: 2px solid #000000;
        background: url('http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.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);
}

@keyframes rot {
        0% {
                transform: rotateX(45deg) rotateY(20deg) rotateZ(0deg);
        }

        100% {
                transform: rotateX(45deg) rotateY(20deg) rotateZ(360deg);
        }
}

#items
{position: absolute;
        width: 100%;
        height: 100%;
top: 0px;
        left: 0px;
animation: slider 5s linear infinite;
}

@keyframes slider
{
        from
        {
                opacity: 0.5;
                filter: hue-rotate(360deg)contrast(120%)brightness(100%);
        }

        50%
        {
                opacity: 1;
        }

        to
        {
                opacity: 1;
                filter: hue-rotate(0deg)contrast(140%)brightness(100%);
        }
}

#photo img {
        width: 1024px;
        height: 600px;
        position: absolute;
        border: 0px solid #000000;
        top: 0px;
        left: 0px;
        filter: contrast(140%)brightness(100%);
-webkit-mask-image: radial-gradient(black 15% ,transparent 65%);
        opacity: 0;
        animation-name: round;
        animation-duration: 32s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
}

@keyframes round {
        0% {
opacity: 1;
transform:translate(-100%,0%)scale(1);}
10% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
15% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
20% {
opacity: 0;
transform:translate(100%,0%)scale(1);}
}

#photo img:nth-child(8) {
        animation-delay: 28s;
}

#photo img:nth-child(7) {
        animation-delay: 24s;
}

#photo img:nth-child(6) {
        animation-delay: 20s;
}

#photo img:nth-child(5) {
        animation-delay: 16s;
}

#photo img:nth-child(4) {
        animation-delay: 12s;
}

#photo img:nth-child(3) {
        animation-delay: 8s;
}

#photo img:nth-child(2) {
        animation-delay: 4s;
}

#photo img:nth-child(1) {
        animation-delay: 0s;
}

.stop #photo img:nth-child(1) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(2) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(3) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(4) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(5) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(6) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(7) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(8) {
        animation-play-state: paused;
}
</style>

<div id="papa" data-lr="no"><div id="testImg">
<divid="items"><divid="photo"><img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909481026411020.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909495450901604.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909521828974999.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909534928702875.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909563082132258.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909581244929944.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092910055041975926.jpg" /><img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909481026411020.jpg" /> </div></div></div>
      <imgid="mpic"style="width: 100%; height: 100%;background: url('http://pan.yinhuabbs.cn/view.php/5a8f8ea3574a218604aa8a8ce894c4d5.png')0 0/80% 80%" >
<imgid="mpic1"style="width: 100%; height: 100%;background: url('http://pan.yinhuabbs.cn/view.php/d3df92bdf235fc04f4fc8ce89a319753.png')0 0/80% 80%" >
      <div id="lrcwrap">
                <span id="lrc1">正在缓冲......</span>
                <span id="lrc2">正在缓冲......</span>
      </div>

<span id="disc"></span>
      <div id="mplayer">
                <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span><input   type="button" id="testBtn" value="."style="position: absolute;border-radius: 0%;width: 35px; height: 35px;-webkit-background-clip : text;z-index: 3;"></div>
                <div id="prog">00:00 | 00:00</div>
      </div>
</div>

<script>
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
aud.src = 'https://www.qqmc.com/mp3/music2290895.mp3';
aud.autoplay = true;
aud.loop = true;


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


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

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

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

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
        prog.style.background = 'linear-gradient(90deg, orange, purple ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
      prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
}
      }
});

let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc2.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc2.style.animationPlayState = 'running');
let showLrc = (time) => {
        lrc2.style.animation = (mFlag ? 'mov1 ': 'mov2 ') + time + 's linear forwards';
        lrc1.innerHTML = lrc2.innerHTML = lrcAr;
      mKey += 1;
      mFlag = !mFlag;
};

let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
}
      }

if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let mtime = lrcAr - (aud.currentTime - lrcAr);
      showLrc(mtime);
};

let toMin = (val) => {
if (!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 60),
                sec = parseFloat(val % 60);
      if (min < 10) min = '0' + min;
      if (sec < 10) sec = '0' + sec;
      return min + ':' + sec;
};

var image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
button.onclick = function() {
      if (this.value == '.') {
            image.classList.add('stop');
            this.value = '*';
}

else {
image.classList.remove('stop');
            this.value = '.';
}
    };
}
</script>

樵歌 发表于 2022-10-5 07:39

最喜欢听她那苍桑的中音了{:4_199:}

起个网名好难 发表于 2022-10-5 07:57

<svg width="100%" height="100%" viewBox="0 0 1000 600"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
   <path id="MyPath"
         d="
      M 200 200
      m -150, 150
      a 200,100 0 1,0 400,0
      a 200,100 0 1,1 400,0
"/>
</defs>

<use xlink:href="#MyPath" fill="none" stroke="transparent"/>

<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
    <textPath xlink:href="#MyPath">
      欣赏、学习、点赞！
             <animate attributeName="startOffset" from="0" to ="1028" begin="0s" dur="10s" repeatCount="indefinite" />

    </textPath>
</text>
</svg>

马黑黑 发表于 2022-10-5 08:04

暂时无分可给了，抱歉。

好帖，好歌。

醉美水芙蓉 发表于 2022-10-5 08:53

红影 发表于 2022-10-5 09:10

还挺的歌曲，漂亮的制作，欣赏亚伦老师好帖{:4_187:}

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

欣赏音画佳作！

查看完整版本: 西海情歌 - 降央卓玛