亚伦影音工作室 发表于 2023-9-19 14:32:25

听不完的情歌 - 夏婉安

本帖最后由 亚伦影音工作室 于 2023-9-19 14:53 编辑 <br /><br /><style>
#papa {margin: 0px 0 0 calc(50% - 681px); width: 1164px;height:680px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;border: 1px solid;background: #333 url('https://www.kumeiwp.com/sub/filestores/2023/02/02/c52ebbf1d81561a7d97939f3bf1dee54.jpg') no-repeat center/cover; position: relative;z-index: 12345;}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 3; background:linear-gradient(0deg, #000000 7%,#Ffffff 8%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 91%);}

.photo {width: 100%;
height: 300%;
position: absolute;z-index: 1;
top:0px; left:0px;
opacity: 0;
animation: round 60s linear infinite;}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0)scale(1)translate(0%,-65%);filter:hue-rotate(0deg);
opacity:1}

40% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);filter:hue-rotate(0deg);filter:hue-rotate(360deg);
opacity:1}
41% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}
.photo:nth-child(1) {animation-delay: 48s;background: url('https://pic.imgdb.cn/item/65093817204c2e34d3def680.jpg') no-repeat center/cover;}
.photo:nth-child(2) {animation-delay: 36s;background: url('https://pic.imgdb.cn/item/65093816204c2e34d3def64a.jpg') no-repeat center/cover;}
.photo:nth-child(3) {animation-delay: 24s;background: url('https://pic.imgdb.cn/item/65093816204c2e34d3def62a.jpg') no-repeat center/cover;}
.photo:nth-child(4) {animation-delay: 12s;background: url('https://pic.imgdb.cn/item/65093817204c2e34d3def66a.jpg') no-repeat center/cover;}
.photo:nth-child(5) {animation-delay: 0s;background: url('https://pic.imgdb.cn/item/65093816204c2e34d3def61d.jpg') no-repeat center/cover;}
.stop .photo:nth-child(1){animation-play-state: paused;}
.stop .photo:nth-child(2){animation-play-state: paused;}
.stop .photo:nth-child(3){animation-play-state: paused;}
.stop .photo:nth-child(4){animation-play-state: paused;}
.stop .photo:nth-child(5){animation-play-state: paused;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
        position: absolute;
        left: calc(5% - 15px);
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 2px solid #cccccc;
        border-radius: 50%;
        opacity: 0;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #cccccc;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 12px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #cccccc;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }

#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 0; cursor: pointer; z-index: 111}
#tx { position: absolute;
        top: 0px;
        left: 0px;z-index: 2;
        width: 100%;
        height: 100%;
        animation: tx 2s linear infinite;
        cursor: pointer;
       }

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

<div id="papa">
<div id="Img" >
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
</div>
<span id="fullscreen">全屏</span>
<div id="mb"></div>
<div id="mplayer"></div>
<div id="tx"><divclass="lrc">
      <ul id="ullrc">
         </ul>
</div> </div>
</div>

<audio id="aud" src="https://www.qqmc.com/mp3/music301528387.mp3" loop autoplay></audio>


<style type="text/css">
.lrc{z-index: 2;
    width: 100%;
    height: 120px;
    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);
    display: block;position: absolute;top:80%; left:0%;
    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;}
</style>
<script >
var lrc = `听不完的情歌 - 夏婉安
作词：杨栋梁
作曲：杨栋梁
演唱：夏婉安
编曲：杨栋梁
混音：杨栋梁
和声：小夜、杨栋梁
制作人：夏婉安
OP：酷娱文化（Solo Music）

听不完的情歌 看不完的日落
只记得曾对我说 一个人要好好过
离开我 就别再说爱我
这首歌 谁在听我诉说
一遍一遍伤害我 一次一次在承受
我们是不是没有了结果
分手后 就别再打扰我
这首歌 想你也别难过
一点一点忘了我 一天一天地接受
我们之间 再不用受折磨
听不完的情歌 看不完的日落
写不满的承诺 愈合不好的伤口
等不完这一生走不到海市蜃楼
只记得 曾对我说 一个人要好好过
分手后 就别再打扰我
这首歌 想你也别难过
一点一点忘了我一天一天地接受
我们之间 再不用受折磨
听不完的情歌 看不完的日落
写不满的承诺 愈合不好的伤口
等不完这一生走不到海市蜃楼
只记得 曾对我说 一个人要好好过
听不完的情歌 看不完的日落
写不满的承诺 愈合不好的伤口
等不完这一生走不到海市蜃楼
只记得 曾对我说 一个人要好好过
`;
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;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
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;
(function(){
var imagee = document.getElementById("Img");
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'),imagee.classList.remove('stop'),imagee.classList.add('stop')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), imagee.classList.remove('stop'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };

</script>

宇神无敌 发表于 2023-9-19 16:57:08

欣赏老师的精彩，好漂亮。:victory:

醉美水芙蓉 发表于 2023-9-19 20:18:37

欣赏亚伦老师好作品！

活跃概况 发表于 2023-10-1 20:32:42

这个作品漂亮！！！！

1643091610 发表于 2023-11-25 17:57:27

这个作品漂亮！！！！
页: [1]
查看完整版本: 听不完的情歌 - 夏婉安