论坛 › 欢乐水吧 › 彩色按钮测试[原创马黑老师]

亚伦影音工作室 发表于 2024-6-23 21:15

彩色按钮测试[原创马黑老师]

本帖最后由 亚伦影音工作室 于 2024-6-23 21:15 编辑 <br /><br /><style>
       #papa { margin: 140px 0 20px calc(50% - 681px); background:url('https://pic.imgdb.cn/item/6673e3b6d9c307b7e9a5a40e.webp') no-repeat center/cover;width: 1200px; height: 700px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 1200px; height: 700px;position: absolute;background:url('https://pic.imgdb.cn/item/6673e3b6d9c307b7e9a5a40e.webp')no-repeat center/cover;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
      #player { position: absolute; left:14%; bottom: 20px; width: 45px; height: 45px; border-radius: 50%; border: thick groove; border-color: cyan orange yellow green; display: grid; place-items: center; transition: .8s; --opt: 1;z-index: 15; }
#player::before, #player::after { position: absolute; content: '';width: 20px; height: 20px; background: orange; transition: .3s; cursor: pointer; }
      #player::before { clip-path: polygon(0 0%, 0 100%, 100% 50%); opacity: calc(var(--opt) * 1); background: cyan;transform: translateX(3px) }
      #player::after { mask: linear-gradient(to right, red 40%, transparent 40%, transparent 70%, red 70%, red 0); -webkit-mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); opacity: calc(1 - var(--opt)); }
      #player:hover { transform: scale(1.1); filter: invert(.3) drop-shadow(0 0 20px black); }
.lrc{
    width: 100%;
    height: 120px;
    overflow: hidden;
    display: block;position: absolute;top:90%; left:4%;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="bjbs"> </div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/8d/bd/2b/469f87fed5a0bc1a2816905294741577/audio.mp3" autoplay loop></audio>
      <div id="player"></div>

<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>
</div>

<script>
var mState = () => {
      player.style.setProperty('--opt', +aud.paused);

       player.title = ['暂停','播放'][+aud.paused];
      };
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();

bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');
</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 / 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;

</script >

红影 发表于 2024-6-23 21:31

小播漂亮，变色背景让图片也变得很很有韵味。歌词同步也漂亮。
欣赏亚伦老师好帖{:4_199:}

梦油 发表于 2024-6-24 09:17

这小姑娘可不胖。

小辣椒 发表于 2024-6-25 14:48

亚伦，这个制作漂亮，画面简洁，有色彩变换，自然流畅{:4_199:}

老谟深虑 发表于 2024-6-25 16:48

本帖最后由 老谟深虑 于 2024-6-25 16:49 编辑

         欣赏老师的佳作。

查看完整版本: 彩色按钮测试[原创马黑老师]