论坛 › 动画音画 › 拐杖-马健涛

亚伦影音工作室 发表于 2025-6-8 10:25

拐杖-马健涛

本帖最后由 亚伦影音工作室 于 2025-6-8 14:34 编辑 <br /><br /><style>
#papa {
      margin: 180px-300px;
      width: 1286px;
      height: 720px;
      background:#000;
      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:10%; left:5px;
    width: 860px;
    height: 550px;/*歌词轮廓高：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: 20px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
    color: #ccc;
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrcli.active{
    font-size: 30px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;
   filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(120deg,#0eaf6d,#ff6ac6 25%,#147b96 50%,#e6d205 55%,#2cc4e0 60%,#8b2ce0 80%,#ff6384 95%,#08dfb4);animation: flowCss 6s infinite linear;
   -webkit-background-size: 200% 100%;}
@keyframes flowCss {
            0% {background-position: 0 0;}
          100% {background-position: -500% 0;}
      }

#ullrc:hover {-webkit-animation: flowCss 4s infinite linear;}
#bt{width: 200px; overflow: hidden; color:#fff; position: absolute; left:78%;bottom: 2%;font-size: 15px; z-index: 19;}
#fullscreen {border-radius: 4px;position: absolute;background:#0000 ;
color:#fff;box-shadow:0px 0px 0px 1px #fff;z-index: 20;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 90%;top: 3%;
}
#dt{position: absolute;top:85%; left:64%;
        width: 35%;mix-blend-mode: screen;
        height: 15%;z-index: 3; }

#dt img{
        width: 100%;
        height: 100%;}
</style>

<div id="papa">
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
<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);
                clip-path: @shape(
                points: 360;
            r: abs.sin.tan(sin(3.5t)*1.14);
      );
                @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='dt'><img id="Img" src="https://cccimg.com/view.php/7dedb9e000fd4291a27e6557f3b41c9a.gif" ></div>
<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://s2.ananas.chaoxing.com/sv-w9/audio/a1/16/55/0dc1bac771009e941ebc7467e99733d0/audio.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://638183.freep.cn/638183/web/api/css-doodle.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;
      }
})();
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop'),imagee.stop()):(image.classList.remove('stop'),imagee.play());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
ullrc.style.animationPlayState =aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>ullrc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => ullrc.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 = 50, lrc_ul_height = 250;/*动态歌词显示的位置：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>
<script>
let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
</script>
<style>
.演员 {
width: 100%;
height: 100%;
position: absolute;
z-index: 8;clip-path: polygon(0% 0%, 0% 100%, 62% 100%, 63% 84%, 100% 74%, 100% 99%, 100% 0%);
top:0px; left:0px;
animation: spin 24s infinite linear;
      opacity: 0;
}

.演员:nth-of-type(1) {animation-delay: 20s;
      background: url('https://pic1.imgdb.cn/item/6844eb3b58cb8da5c83985de.webp')no-repeat center/cover;
      
}

.演员:nth-of-type(2) {animation-delay: 16s;
      background: url('https://pic1.imgdb.cn/item/6844eb3b58cb8da5c83985dd.webp')no-repeat center/cover;
      
}

.演员:nth-of-type(3) {animation-delay: 12s;
      background: url('https://pic1.imgdb.cn/item/6844eade58cb8da5c8398514.webp')no-repeat center/cover;
      
}

.演员:nth-of-type(4) {animation-delay: 8s;
      background: url('https://pic1.imgdb.cn/item/6844eade58cb8da5c8398513.webp')no-repeat center/cover;
      
}

.演员:nth-of-type(5) {animation-delay: 4s;
      background:url('https://pic1.imgdb.cn/item/6844eade58cb8da5c8398511.webp')no-repeat center/cover;
      
}

.演员:nth-of-type(6) {animation-delay: 0s;
      background: url('https://pic1.imgdb.cn/item/6844eade58cb8da5c8398512.webp')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; }25% { opacity: 0; }
}
</style>
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            imagee.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 imagee= document.getElementById("Img");
</script>

樵歌 发表于 2025-6-8 11:16

画面把音乐表现的情绪意境发挥得淋漓尽致！

杨帆 发表于 2025-6-8 11:21

好听好看，谢谢亚伦老师经典分享{:4_191:}

梦油 发表于 2025-6-8 14:26

欣赏佳作，问候亚伦。

亦是金 发表于 2025-6-12 08:30

欣赏学习老师精彩音画，制作辛苦了。问好！{:4_190:}

查看完整版本: 拐杖-马健涛