论坛 › 欢乐水吧 › 江山万里不及你【可控】

亚伦影音工作室 发表于 2022-10-20 07:14

江山万里不及你【可控】

本帖最后由 亚伦影音工作室 于 2022-10-20 07:14 编辑 <br /><br /><style>
#papa { left: -214px; width: 1124px; height: 639px;background:url('http://chuangshicdn.data.mvbox.cn/album/22/10/20/22102006021713020366.jpg')0 0/100% 100%;display: grid; place-
items: center; overflow: hidden; position: relative; z-index: 1; }
#btnplay {position: absolute;
        width: 90px;
        height: 90px;
        left: 30px;
        bottom: 20px;
        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);}
#tupian { position: absolute;
        top: 0px;
        left: 0px;
        width: 1124px;
        height: 639px;
        animation: tu 30s linear infinite;
        cursor: pointer;-webkit-mask-image: radial-gradient(black 100% ,transparent 100%);
        opacity: 1; }
@keyframes tu { 0% {left: 0px;}
        50% {left: 700px;transform: rotateY(0deg)}
51% {left: 700px;transform: rotateY(180deg)}
99% {left: 0px;transform: rotateY(180deg)}
100% {left: 0px;transform: rotateY(180deg)}
}


#mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 1124px;
        height: 639px;
        animation: fly 100s linear infinite;
        cursor: pointer;
        opacity: 1; }
#mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 1124px;
        height: 6px;
        animation: tot 80s linear infinite;
        cursor: pointer;
        opacity: 1; }

#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; top: 520px; left: 350px; color: #000080; font-family: 华文隶书;font-size: 45px;-webkit-background-clip: text; filter: drop-shadow(#ffffff 2px 0 0)drop-shadow(#ffffff 0 2px 0)drop-shadow(#ffffff -2px 0 0) drop-shadow(#ffffff 0 -2px0); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap;background: repeating-linear-gradient(275deg, #EE0C0C 0%,#E33D0C 100%);-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { 0% {
                transform: rotateX(45deg) rotateY(20deg) rotateZ(0deg);
        }

        100% {
                transform: rotateX(45deg) rotateY(20deg) rotateZ(360deg);
        }}
@keyframes fly {from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
        }

        to {
                background-position: 100px 1600px;
        }
}
@keyframes tot {from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
        }

        to {
                background-position: -1600px 300px;
        }
}

#tx { position: absolute;
        top: 0px;
        left: 0px;
        width: 1024px;
        height: 600px;
        animation: tx 3s linear infinite;
        cursor: pointer;
        opacity: 1; }

@keyframes tx {
to {filter:hue-rotate(360deg)contrast(100%)brightness(150%);}
}
</style>

<div id="papa"><div id="tx">
<div class="img_border" id="aplay" style="width: 1124px; height: 639px;position: absolute;">
<div id="tupian" style="width: 30%; height: 100%;position: absolute;top: 60px;left: 0px;background: url('http://chuangshicdn.data.mvbox.cn/album/22/10/20/22102006084024505422.png')0 0/100% 100%"></div></div></div>
<img style="width: 100%; height: 100%;background: url('http://image.hnol.net/c/2022-01/01/20/202201012050163251-5769293.png')0 0/30% 40%" >
       <imgid="mpic"style="width: 100%; height: 100%;background: url('http://image.hnol.net/c/2022-01/01/20/202201012050163251-5769293.png')0 0/50% 70%" >
<imgid="mpicc"style="width: 100%; height: 100%;background: url('http://image.hnol.net/c/2022-01/01/20/202201012050163251-5769293.png')0 0/30% 40%" >
<span id="btnplay" style="animation-play-state: running;"></span>
   <span id="lrc" data-lrc="正在播放..." style="--state:running; --motion:cover1; --tt:9.1s;">正在播放...</span>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music193705904.mp3" autoplay="autoplay"></audio>
<script>
(function() {
      let mKey = 0, mFlag = true, slip = 0.5;
       let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      aud.loop = false;
      btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
      aud.addEventListener('timeupdate', () => {
                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime - slip >= lrcAr) {
                              if (mKey === j) showLrc(lrcAr);
                              else continue;
                        }
                }
      });

let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running',

lrc.style.setProperty('--state', 'running'));
      let showLrc = (time) => {
                let name = mFlag ? 'cover1' : 'cover2';
                lrc.innerHTML = lrc.dataset.lrc = lrcAr;
                lrc.style.setProperty('--motion', name);
                lrc.style.setProperty('--tt', time + 's');
                lrc.style.setProperty('--state', 'running');
                mKey += 1;
                mFlag = !mFlag;
      };
})();
tupian.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tupian.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tupian.style.animationPlayState = 'paused');

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

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

tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');
</script>
<style>
.img_border{display:inline-block;width:1124px;height:639px;margin:0px ;position: absolute;}
.img_border #aplay{border:1px solid #000000;border-radius:0%; }
.z360z{animation: rotating 0s linear infinite;background:url('http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313512556895204.gif')0 0/50%50%,url('http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313224507420082.gif')0 0/50%50%,url('http://chuangshicdn.data.mvbox.cn/album/22/03/04/22030408532927019944.gif')0 0/100%100%;}@keyframes rotating{from {filter:hue-rotate(0deg)contrast(120%)brightness(110%);}
to {filter:hue-rotate(60deg)contrast(110%)brightness(100%);}}
</style>
<script type="text/javascript">
var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function(){document.getElementById

("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc); </script>
</div>

亚伦影音工作室 发表于 2022-10-20 07:15

图片不显示及时反馈，谢谢大家！

马黑黑 发表于 2022-10-20 07:15

欣赏亚伦精美作品

红影 发表于 2022-10-20 08:44

我这里网络有限制，暂时听不了歌曲。先来给亚伦老师点赞送花{:4_187:}

相约爱晚亭 发表于 2022-10-20 10:12

欣赏精美音画佳作！

加林森 发表于 2022-10-20 12:02

欣赏亚伦的精美制作！

醉美水芙蓉 发表于 2022-10-20 20:04

绿叶清舟 发表于 2022-10-20 20:29

制作精美，欣赏

起个网名好难 发表于 2022-10-20 20:40

末尾的代码是多余的吧。
<style>
.img_border{display:inline-block;width:1124px;height:639px;margin:0px ;position: absolute;}
.img_border #aplay{border:1px solid #000000;border-radius:0%; }
.z360z{animation: rotating 0s linear infinite;background:url('http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313512556895204.gif')0 0/50%50%,url('http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313224507420082.gif')0 0/50%50%,url('http://chuangshicdn.data.mvbox.cn/album/22/03/04/22030408532927019944.gif')0 0/100%100%;}@keyframes rotating{from {filter:hue-rotate(0deg)contrast(120%)brightness(110%);}
to {filter:hue-rotate(60deg)contrast(110%)brightness(100%);}}
</style>
<script type="text/javascript">
var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function(){document.getElementById

("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc); </script>
</div>

亚伦影音工作室 发表于 2022-10-20 20:45

起个网名好难 发表于 2022-10-20 20:40
末尾的代码是多余的吧。

用于控制动画转静态代码！

起个网名好难 发表于 2022-10-20 20:47

亚伦影音工作室 发表于 2022-10-20 20:45
用于控制动画转静态代码！

把它去掉试试看对帖子有何影响。

醉美水芙蓉 发表于 2022-10-20 21:52

起个网名好难 发表于 2022-10-20 22:33

醉美水芙蓉 发表于 2022-10-20 21:52
老师果然厉害！去掉了干净利落，只是少了一个特效而已！

眼拙，没看出少了什么。

亚伦影音工作室 发表于 2022-10-20 22:45

起个网名好难 发表于 2022-10-20 22:33
眼拙，没看出少了什么。

后边的代码只是控制背景动态消失转静态，其实是一个动态，一个静图相互转换，我用的是一种方法，马黑老师有一种好方法！

起个网名好难 发表于 2022-10-20 22:59

亚伦影音工作室 发表于 2022-10-20 22:45
后边的代码只是控制背景动态消失转静态，其实是一个动态，一个静图相互转换，我用的是一种方法，马黑老师 ...

没讨论的必要了{:5_102:}

查看完整版本: 江山万里不及你【可控】