论坛首页 › 特效动画 › 修改klxf老师的作品

亚伦影音工作室 发表于 昨天 12:10

修改klxf老师的作品

本帖最后由 亚伦影音工作室 于 2025-1-17 12:14 编辑 <br /><br /><style type="text/css">
#papa { margin: 10px 0 30px calc(50% - 721px);width: 1280px; height: 720px; background-blend-mode:hue;background:url('https://pic.imgdb.cn/item/65bba435871b83018a4e2002.jpg')no-repeatcenter/cover;box-shadow:0px 0px 0px 2px #fff,0px 0px 0px 6px #880000; overflow: hidden; z-index:2; position: relative; display: grid; place-items: center;animation: rotating 5s linear infinitevar(--state); }
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
#pic{width: 100%; height: 100%; position: absolute;top:0px; left:0px;z-index:3;mix-blend-mode: screen;}
#pic img{height: 100%;width: 100%;}
#fullscreen { opacity:1;position: absolute; width: 40px; height: 40px; top:3%; cursor: pointer;left:20px;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 40px; height: 40px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;}
#退出{ width: 40px; height: 40px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
#vid1 {
    position: absolute;
    left:0px;
    top:-90px;
    width: 100%;
    height:130%;
    mix-blend-mode:screen;
    opacity: 0.8;   
    object-fit: cover;
    z-index:3;
}
#vid2 {
    position: absolute;
    left:0px;
    top:-90px;
    width: 100%;
    height:130%;
    mix-blend-mode:screen;
    opacity: 0.8;   
    object-fit: cover;
    z-index:4;
}
#player {
    position: absolute;z-index: 20;
    right: 3%;bottom:5%;
    width: 50px;
    height: 50px;
    border: 3px solid #cccccc;
    border-radius: 50%;
    opacity: 1;   
      cursor: pointer;
    pointer-events: auto;
      z-index:8;
}

.lrc{
    width: 100%;
    height: 120px;
    overflow: hidden;
    display: block;position: absolute;
    top:12%;
    left:0%;z-index: 7;
    margin: 0 auto;}

/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
    font-family:华文隶书;
    font-size: 0px;
    color: #000078;
    font-weight: 400;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 55px;
text-align: center; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen) 50%/100px 80px; -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);
}

#con {position: absolute;
    left: 10%; bottom: 10%;
background:#880000;
    opacity: .8;   
    z-index:6;
}
. tz{ position: absolute; display: grid; place-items: center;
      }
      h1 {font-size: 2em;margin-bottom: 20px;
      }
      #countdown {font-size:1.5em;margin-bottom: 20px;
      }
      .container {display: inline-block; padding: 20px;border-radius: 10px;background:#1E90FF;color:#7CFC00;margin:30px auto;
      }
      .time-box { display: inline-block;margin: 0 10px;padding: 10px;background: #FF3030;color: #FFD700;border-radius: 5px;
}
      .time-box span {display: block;font-size: 1.5em;
      }
      .time-box b {font-size: 1.8em;
      }

</style>
<div id="papa" >
<divid="con" class="tz" >
      <h1>2025春节大年初一倒计时</h1>
      <div id="countdown">
            <div class="time-box"><span>天</span><b id="days"></b></div>
            <div class="time-box"><span>时</span><b id="hours"></b></div>
            <div class="time-box"><span>分</span><b id="minutes"></b></div>
            <div class="time-box"><span>秒</span><b id="seconds"></b></div>
      </div>
    </div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>

<div id="pic" ><img id="Img" src="https://wimg.588ku.com/gif620/22/01/07/57eef3f535fb1ea56925950f32f58a5d.gif" alt="" /></div>
<video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c05d86785e.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2418175/00/08/42/5d2228836b4e9.mp4" autoplay loop muted></video>
<img id="player" alt="" src="https://xlaj.cn/upfile/202411/30/07.gif" title="播放/暂停" />
<div class="lrc">
      <ul id="ullrc"></ul>
      </div>
<audio id="aud" src="https://cccimg.com/view.php/c61b104506de5c4c3661bdff879437d8.mp3" loop autoplay></audio>
</div>


<script>
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

var mState = () => {
    player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    papa.style.setProperty('--state', aud.paused ? 'paused' : 'running')
    aud.paused ? (vid1.pause(),vid2.pause(), image0.stop()) : (vid1.play(),vid2.play(), image0.play());
};
    aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
    player.onclick = () => aud.paused ? aud.play() : aud.pause();
</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 = `
欢乐中国年 - 孙悦
词：张俊以
曲：卞留念
欢乐中国年
欢乐欢乐中国年
啦啦啦啦啦年
欢乐欢乐中国年
欢乐中国年
金风送喜来
紫荆花已开
二月大地春雷
锣鼓敲起来
百年梦已圆
千年手相牵
中国走进新时代
金风送喜来
紫荆花已开
二月大地春雷
锣鼓敲起来
百年梦已圆
千年手相牵
中国走进新时代
欢乐欢乐中国年
欢乐欢乐中国年
欢乐欢乐中国年
中国年
恭喜恭喜中国年
五谷丰登笑开颜
恭喜恭喜中国年
歌声万里连成片
欢乐欢乐中国年
欢歌笑声连成片
欢乐欢乐中国年
红红火火到永远
金风送喜来
紫荆花已开
二月大地春雷
锣鼓敲起来
百年梦已圆
千年手相牵
中国走进新时代
金风送喜来
紫荆花已开
二月大地春雷
锣鼓敲起来
百年梦已圆
千年手相牵
中国走进新时代
恭喜恭喜中国年
五谷丰登笑开颜
恭喜恭喜中国年
歌声万里连成片
欢乐欢乐中国年
欢歌笑声连成片
欢乐欢乐中国年
红红火火到永远
恭喜恭喜中国年
五谷丰登笑开颜
恭喜恭喜中国年
歌声万里连成片
欢乐欢乐中国年
欢歌笑声连成片
欢乐欢乐中国年
红红火火到永远
恭喜恭喜中国年
五谷丰登笑开颜
恭喜恭喜中国年
歌声万里连成片
欢乐欢乐中国年
欢歌笑声连成片
欢乐欢乐中国年
红红火火到永远
红红火火到永远
欢乐中国年
欢乐欢乐中国年

`;
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 >
<script>
      function updateCountdown() {
            const targetDate = new Date('January 29, 2025 00:00:00').getTime(); // 修改为2025年新年
            const now = new Date().getTime();
            const timeDifference = targetDate - now;

            const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

            document.getElementById('days').innerText = days;
            document.getElementById('hours').innerText = hours;
            document.getElementById('minutes').innerText = minutes;
            document.getElementById('seconds').innerText = seconds;
      }

      setInterval(updateCountdown, 1000);
      updateCountdown();
    </script>

1643091610 发表于 昨天 13:53

支持一下，期待更多东西

klxf 发表于 昨天 14:06

由衷感谢亚伦老师！
我认真学习一下。:)

醉美水芙蓉 发表于 昨天 19:53

亚伦老师厉害！修改成功啦！

klxf 发表于 昨天 20:46

醉美水芙蓉 发表于 2025-1-17 19:53
亚伦老师厉害！修改成功啦！

是啊，亚伦老师威武:victory:

查看完整版本: 修改klxf老师的作品