论坛 › 欢乐水吧 › 你来了一阵子（DJ女声版）-王娜

亚伦影音工作室 发表于 2024-11-20 10:40

你来了一阵子（DJ女声版）-王娜

本帖最后由 亚伦影音工作室 于 2024-11-20 19:03 编辑 <br /><br /><style type="text/css">
#papa { margin: 10px 0 20px calc(50% - 780px); width: 1400px; height: 720px; background:#000080 url(https://)no-repeat center/cover;box-shadow:0px 0px 0px 2px #fff,0px 0px 0px 4px #880000; overflow: hidden; z-index: 123465; position: relative; display: grid; place-items: center; }
#dtbj{width: 100%; height: 150%; position: absolute;top:0px; left:0px;z-index: 1;}
#dtbj img{height: 100%;width: 100%;}
#pbpb{width:25%;
height: 100%;
position: absolute;
top:0px; left:0px;z-index: 2;}
.photo {width:100%;
height: 100%;box-shadow:0px 0px 0px 1px #fff;
position: absolute;filter: url(#water);
top:0px; left:0px;
opacity: 0;
animation: round 48s linear infinite;
}
@keyframes round { 0% {opacity: 0;}
1% {opacity: 1;transform:rotateY(180deg)}
2% {opacity: 1;}
3% {opacity: 1;transform:rotate(360deg);}
4% {opacity: 1;transform:rotate(0deg);}
5% {opacity: 1;transform:rotateY(180deg);}
18% {opacity: 0;transform:rotateY(180deg)}
}
.photo:nth-child(1) {background:url(https://pic.imgdb.cn/item/67091935d29ded1a8cce7620.jpg)no-repeat center/cover;
animation-delay: 0s;
}
.photo:nth-child(2) {background:url(https://pic.imgdb.cn/item/6738822fd29ded1a8ca5f5bc.webp)no-repeat center/cover;
animation-delay: 6s;
}
.photo:nth-child(3) {background:url(https://pic.imgdb.cn/item/67388237d29ded1a8ca5fcb0.webp)no-repeat center/cover;
animation-delay: 12s;
}
.photo:nth-child(4) {background:url(https://pic.imgdb.cn/item/67388241d29ded1a8ca6069b.webp)no-repeat center/cover;
animation-delay: 18s;
}
.photo:nth-child(5) {background:url(https://pic.imgdb.cn/item/6738824ad29ded1a8ca60e71.webp)no-repeat center/cover;
animation-delay: 24s;
}
.photo:nth-child(6) {background:url(https://pic.imgdb.cn/item/67388330d29ded1a8ca6bfb3.webp)no-repeat center/cover;
animation-delay: 30s;
}
.photo:nth-child(7) {background:url(https://pic.imgdb.cn/item/67388338d29ded1a8ca6c4cf.webp)no-repeat center/cover;
animation-delay: 36s;
}
.photo:nth-child(8) {background:url(https://pic.imgdb.cn/item/673888f7d29ded1a8cab59cc.webp)center/cover no-repeat;
animation-delay: 42s;
}
.stop .photo:nth-child(8),
.stop .photo:nth-child(7),
.stop .photo:nth-child(6),
.stop .photo:nth-child(5),
.stop .photo:nth-child(4),
.stop .photo:nth-child(3),
.stop .photo:nth-child(2),
.stop .photo:nth-child(1){animation-play-state: paused;}
#player {
        position: absolute;z-index: 40;
        left: calc(50% - 15px);
        bottom: 5px;background:#600000;
        width: 30px;
        height: 30px;
        border: 3px solid #cccccc;
        border-radius: 50%;
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#player::before, #player::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #cccccc;
        cursor: pointer;
        transition: .4s;
}
#player::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 14px;
        border-color: transparent transparent transparent #cccccc;
        opacity: var(--disp1);
}
#player::after {
        width: 2px;
        height: 18px;
        border-width: 0 5px 0 5px;
        opacity: var(--disp2);
}
.lrc{
    width: 100%;
    height: 120px;
    overflow: hidden;
    display: block;position: absolute;top:85%; left:0%;z-index: 5;
    margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
text-align: center;text-align: center;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);
}


</style>
<div id="papa" >
<div id="dtbj" ><img id="Img" src="https://pic.imgdb.cn/item/65d6e2059f345e8d032e3cef.gif" alt="" /></div>
<div id="testImg">
<svg width="0" height="0"id="p" >
<filter id="water">
    <feTurbulence type="fractalNoise" baseFrequency=".05 .05" numOctaves="1" result="noise1"></feTurbulence>
    <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
      <animate attributeName="values" from="0" to="360" dur="2s" repeatCount="indefinite"/>
    </feColorMatrix>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="5" in="SourceGraphic" in2="noise2" />
</filter>
</svg>
<div id="pbpb" style="position:absolute;LEFT:0%;">
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
</div>
<div id="pbpb" style="position: absolute;LEFT:25%;">
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
</div>

<div id="pbpb" style="position: absolute;LEFT:50%;">
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
</div>

<div id="pbpb" style="position: absolute;LEFT:75%;">
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
</div>
</div>
<div id="player"></div>
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>

<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/58/0d/b8/903f4588d37bbd40f57a9e8530f8d331/audio.mp3" loop autoplay></audio>
</div>
<script>
let mState = () => aud.paused ? (player.style.setProperty('--disp1','1'),p.pauseAnimations(),player.style.setProperty('--disp2','0')) : (player.style.setProperty('--disp1','0'),p.unpauseAnimations(),player.style.setProperty('--disp2','1'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
var image= document.getElementById("testImg");
player.onclick = () => aud.paused ? (aud.play(),image.classList.remove('stop'),image0.play()): (aud.pause(),image.classList.add('stop'),image0.stop());
</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;
            // 透明度还原
            image0.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 image0= document.getElementById("Img");
</script>
<script >
var lrc = `你来了一阵子（DJ 女声版）
作词：人生感悟钰柃
作曲：人生感悟
演唱：王娜
编曲：张浩
混音：惠永平
出品人：凌联兴/苏琦惠/杨佳益
联合出品：腾讯音乐人×突破音乐
监制：韩页@突破音乐
统筹：孙梦迪@腾讯音乐人/袁霞@突破音乐
推广：林雨晨@腾讯音乐人/孙梦迪@腾讯音乐人/炽热星球团队
OP：腾讯音乐人·Nevermind Studio
你来了一阵子（DJ 女声版）
你来了一阵子我疼了一辈子
想你也找不到合适的方式
想要放弃你却又害怕失去你
因为我的世界你无人能代替
你是不是那个人
陪我一程却陪不了一生
你是别人的风景
为何要淋湿我的眼睛
我不后悔遇见你
所有的遗憾都放在心里
我没有成为你的偏爱
你却成了我爱而不得的无奈
你来了一阵子我疼了一辈子
爱上你是让我最心痛的事
想放放不下想忘忘不掉
就连见面也是一种奢侈
你来了一阵子我疼了一辈子
想你也找不到合适的方式
想要放弃你却又害怕失去你
因为我的世界你无人能代替
我不后悔遇见你
所有的遗憾都放在心里
我没有成为你的偏爱
你却成了我爱而不得的无奈
你来了一阵子我疼了一辈子
想你也找不到合适的方式
想要放弃你却又害怕失去你
因为我的世界你无人能代替
你无人能代替
`;
function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
   var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 3 - lrc_ul_height / 3;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("aud").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;
</script >

小辣椒 发表于 2024-11-20 16:32

亚伦这个图片转换代码漂亮{:4_187:}

小辣椒 发表于 2024-11-20 16:33

亚伦喜欢捣鼓代码，也是玩出了自己的风格{:4_199:}

小辣椒 发表于 2024-11-20 16:34

感谢亚伦精彩的分享

老谟深虑 发表于 2024-11-20 18:31

         老师这个代码很不错，点赞！

查看完整版本: 你来了一阵子（DJ女声版）-王娜