论坛 › 欢乐水吧 › 《今生有缘》云菲菲 TO红影

焱鑫磊 发表于 2023-12-31 22:52

《今生有缘》云菲菲 TO红影

本帖最后由 焱鑫磊 于 2023-12-31 23:13 编辑 <br /><br /><style>
#papa {
      margin: 100px-280px;
      width: 1164px;
      height: 620px;
      background:linear-gradient(45deg, #000000 4%,#000000 37%,#000078 68%,#000000 100%);
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;
      display: grid;
      place-items: center;
      }

.lrc{ position: absolute;top:320px; left:5px;
    width: 860px;
    height: 160px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
        z-index: 9;
    overflow: hidden;
    display: block;
    margin: 20px -150px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 50px;
    line-height: 50px;
font-family:悟空大字库;
    font-size: 25px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrcli.active{
    font-size: 35px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #Ff0A0A 4%,#F0EC92 37%,#FBFAFA 68%,#06F61A 100%);
   background-position: -2800px 0;
   filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
   }
#bt{width: 200px; overflow: hidden; color: lightgreen; position: absolute; left:78%;bottom: 2%;font-size: 15px; z-index: 9;}

</style>

<div id="papa">
<div class="lrc">
       <ul id="ullrc">
          </ul>
      </div>
<css-doodle id="mplayer">
      :doodle {z-index:80 ;
                @grid: 2 / 260px 60px;
                position: absolute;
                color: var(--color);
                bottom: 5%;left: 72%;
                --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 10% 80%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */
      @nth(2) {
                @size: var(--size);
                @shape: windmill;
                @place: 45% 35%;
                background: var(--color);
                animation: rot 6s infinite linear var(--state);
      }
      /* 时间信息 : 右 */
      @nth(3) {
                @place: 80% 80%;
                :after { content: var(--ttmsg2); }
      }
      /* 进度条 */
      @nth(4) {
                @place: 40% 80%;
                @size: 100% 2px;
                background: #bbb;
                display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>

<div id="testImg" >
      <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
      </div>
<audio id="aud" src="https://i.mp3.wf/view.php/1b9dab68e984025b9565d11c01100af8.mp3" autoplay loop></audio>
<span id="bt">《今生有缘》云菲菲</span>
</div>

<script>
(function() {
      let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
      let script = document.createElement('script');
      script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
      document.head.appendChild(script);
      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;};
      let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });

      mplayer.onclick = () => {
                if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
                if(clickIdx === 2) aud.currentTime = progChg;
      }
      mplayer.onmousemove = (e) => {
                let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
                clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
                mplayer.style.cursor = cursors;
                if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
      }
})();
</script>

<script >
var lrc = `《今生有缘》云菲菲
红影新年快乐！
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 = 50, lrc_ul_height = 160;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    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;
lrc.style.animationPlayState =aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>lrc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => lrc.style.animationPlayState = 'paused');

(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
</script>
<style>
.演员 {
width: 100%;
height: 100%;
position: absolute;
z-index: 8;
top:0px; left:0px;
animation: spin 24s infinite linear;
      opacity: 0;
}

.演员:nth-of-type(1) {animation-delay: 20s;
      background: url('https://img.fy6b.com/2023/12/31/6fa52e5a2b896.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(2) {animation-delay: 16s;
      background: url('https://img.fy6b.com/2023/12/31/26be10b576540.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(3) {animation-delay: 12s;
      background: url('https://img.fy6b.com/2023/12/31/0589b6ece5360.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(4) {animation-delay: 8s;
      background: url('https://img.fy6b.com/2023/12/31/de7b516d847de.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(5) {animation-delay: 4s;
      background:url('https://img.fy6b.com/2023/12/31/d832266eed72d.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(6) {animation-delay: 0s;
      background: url('https://img.fy6b.com/2023/12/31/45ee69db2fa24.jpg')no-repeat center/cover;
      
}
.stop .演员:nth-child(1),
.stop .演员:nth-child(2),
.stop .演员:nth-child(3),
.stop .演员:nth-child(4),
.stop .演员:nth-child(5),
.stop .演员:nth-child(6){animation-play-state: paused;}
@keyframes spin {
      0% { opacity: 0; }
      8% { opacity: 1; } 10% { opacity: 1; }20% { opacity: 0; }
}
</style>

红影 发表于 2023-12-31 23:41

这个真漂亮，多谢焱鑫磊，也祝你新年快乐，万事如意{:4_187:}

焱鑫磊 发表于 2023-12-31 23:57

红影 发表于 2023-12-31 23:41
这个真漂亮，多谢焱鑫磊，也祝你新年快乐，万事如意

红影新年快乐！{:4_176:}

红影 发表于 2024-1-1 10:37

焱鑫磊 发表于 2023-12-31 23:57
红影新年快乐！

多谢焱鑫磊的好礼，新年快乐{:4_187:}

老谟深虑 发表于 2024-1-2 18:50

          欣赏老师佳作，新年好！

焱鑫磊 发表于 2024-1-3 11:00

老谟深虑 发表于 2024-1-2 18:50
欣赏老师佳作，新年好！

{:4_190:}

彩云归 发表于 2024-8-16 08:16

欣赏老朋友佳作！

小文 发表于 2024-8-16 09:25

很精致的，喜欢更欣赏！

查看完整版本: 《今生有缘》云菲菲 TO红影