亚伦影音工作室 发表于 2024-10-25 10:26

两手空空心空空-艺凌

<style>
#papa{
        position: relative;
        width: 1300px;
        height: 720px;
      margin-left:-310px;
        margin-top:230px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:#000;
        overflow: hidden;
}
#pa{z-index: 1;
width: 105%;
height: 105%;
position: absolute;
top: -4px;
left: -4px;background:url(https://pic.imgdb.cn/item/67162cc8d29ded1a8c2e8fa0.jpg)no-repeat center/cover;
filter: url(#water)
}
#play { left:6%;
        top:88%;z-index: 10;
--line: #000;
--line-width: 6px;
--duration: .5s;
position: absolute;
cursor: pointer;
}

#play input {cursor: pointer;
display: none;
}

#play input + svg {
display: block;
fill: none;
stroke: var(--line);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: var(--line-width);
width: 90px;
height: 76px;
}

#play input + svg path {
animation: var(--name) var(--duration) ease forwards
}
#play input + svg path:nth-child(2) {
stroke-dashoffset: 1px;
}
#play input + svg path:nth-child(3) {
stroke-dashoffset: 1px;
}
#play input:checked + svg path:nth-child(1) {
--name: shape;
}
#play input:checked + svg path:nth-child(2) {
--name: small;
}
#play input:checked + svg path:nth-child(3) {
--name: large;
}


#play input:not(:checked) + svg path:nth-child(1) {
--name: shape-r;
}
#play input:not(:checked) + svg path:nth-child(2) {
--name: small-r;
}
#play input:not(:checked) + svg path:nth-child(3) {
--name: large-r;
}

@keyframes small {
0%,30% {
    stroke-dasharray: 0 0 30px 64px;
}
40% {
    stroke-dashoffset: 16px;
}
80%,
    100% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dasharray: 0 43px 30px 64px;
}
100% {
    stroke-dasharray: 0 39px 30px 64px;
}
}

@keyframes small-r {
0% {
    stroke-dasharray: 0 39px 30px 64px;
}
0%,
    40% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dashoffset: 16px;
}
70%,
    100% {
    stroke-dasharray: 0 0 30px 64px;
}
}

@keyframes large {
0%,30% {
    stroke-dasharray: 0 0 50px 84px;
}
40% {
    stroke-dashoffset: 16px;
}
80%,
    100% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dasharray: 0 82px 32px 84px;
}
100% {
    stroke-dasharray: 0 78px 32px 84px;
}
}

@keyframes large-r {
0% {
    stroke-dasharray: 0 78px 32px 84px;
}
0%,
    40% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dashoffset: 16px;
}
70%,
    100% {
    stroke-dasharray: 0 0 50px 84px;
}
}

@keyframes shape {
0% {
    stroke-dasharray: 60px 0 184px;
    stroke-dashoffset: 0;
}
70% {
    stroke-dasharray: 63px 51px 184px;
    stroke-dashoffset: 21px;
}
100% {
    stroke-dasharray: 59px 47px 184px;
    stroke-dashoffset: 17px;
}
}

@keyframes shape-r {
0% {
    stroke-dasharray: 59px 47px 184px;
    stroke-dashoffset: 17px;
}
100% {
    stroke-dasharray: 60px 0 184px;
    stroke-dashoffset: 0;
}
}

#tp{width: 100%;z-index: 2;
height: 100%;
position: absolute;
top: 0%; mix-blend-mode: lighten; opacity: .5;
left: 0%;}

#tp img{height: 100%;width: 100%;}

#tz { top:10%;left:90%;width: 100px; height: 600px; z-index: 22; overflow: hidden; position: absolute; }
      #tz::before { content: attr(data-lrc); position: absolute; left: 20px; top: 0px; width: 80px; height: 100%; writing-mode: vertical-rl; font: normal 35px/90px 微软雅黑; color: transparent; background: repeating-linear-gradient(to bottom, gold, lightgreen, snow, lightgreen, orange) 50%/80px 200px; -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="pa" >
<svg width="0" height="0"id="p" >
<filter id="water">
    <feTurbulence type="fractalNoise" baseFrequency=".05 .05" numOctaves="1" result="noise1"></feTurbulence>
    <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
      <animate attributeName="values" from="0" to="360" dur="1s" repeatCount="indefinite"/>
    </feColorMatrix>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="4" in="SourceGraphic" in2="noise2" />
</filter>
</svg>
</div>

<label id="play">
    <input type="checkbox" id='ctrl'>
    <svg viewBox="0 0 108 96">
      <path d="M7,28 L35,28 L35,28 L59,8 L59,88 L35,68 L7,68 C4.790861,68 3,66.209139 3,64 L3,32 C3,29.790861 4.790861,28 7,28 Z"></path>
      <path d="M79,62 C83,57.3333333 85,52.6666667 85,48 C85,43.3333333 83,38.6666667 79,34 L49,3"></path>
      <path d="M95,69 C101.666667,61.6666667 105,54.3333333 105,47 C105,39.6666667 101.666667,32.3333333 95,25 L75.5,6 L49,33"></path>
    </svg>
</label>
<div id="tz" data-lrc="两手空空心空空-艺凌"></div>
<div id="tp" ><img id="Img" src="https://pic.imgdb.cn/item/66a1ddcfd9c307b7e912a018.gif" alt="" /></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2122122775.mp3" autoplay="" loop="loop"></audio>
</div>
<script>
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
play.onclick = () => aud.paused && !ctrl.checked?(aud.play(),p.unpauseAnimations(),image.play()) :(aud.pause(), p.pauseAnimations(),image.stop());
</script>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};
var mState = () => {
    tz.style.setProperty('--state', ['running','paused'][+aud.paused]);

    //其它控制代码
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};

var lrc = `两手空空心空空-艺凌
作词：龙奔
作曲：龙奔
混音：卢晓武
出品公司：布丁音乐
「未经许可请勿商业翻唱」
坚持了一年又一年
只剩下无尽的疲倦
幸福的画面
何时才能实现
我在心中不断的祈愿
期盼着一年又一年
年年却从未有改变
现实的生活
离梦想太遥远
皱纹悄悄爬满我的脸
两手空空心也空空
时光为何越来越匆匆
每当到年底 心却很沉重
一次次的怪自己没用
两手空空心也空空
脸上越来越少的笑容
家人的期盼 让我很惶恐
自己的苦只有自己懂
期盼着一年又一年
年年却从未有改变
现实的生活
离梦想太遥远
皱纹悄悄爬满我的脸
两手空空心也空空
时光为何越来越匆匆
每当到年底 心却很沉重
一次次的怪自己没用
两手空空心也空空
脸上越来越少的笑容
家人的期盼 让我很惶恐
自己的苦只有自己懂
两手空空心也空空
脸上越来越少的笑容
家人的期盼 让我很惶恐
自己的苦只有自己懂
家人的期盼 让我很惶恐
自己的苦只有自己懂
自己的苦只有自己懂

`;
getAr(lrc);
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.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 image= document.getElementById("Img");
</script>

老谟深虑 发表于 2024-10-25 14:58

         欣赏老师的佳作，点赞！

红影 发表于 2024-10-25 17:35

歌曲好听，制作漂亮。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-10-25 17:36

那个烟雾效果还以为是视频呢，看到暂停时是第一帧，才知道是动图。{:4_204:}

小辣椒 发表于 2024-10-25 20:42

亚伦这个用了动图，点击停止会消失动图，不能画面暂停，亚伦是一步步在改进，希望最后动图可以一键点击停止{:4_199:}

小辣椒 发表于 2024-10-25 20:43

欣赏亚伦的精彩制作{:4_199:}
页: [1]
查看完整版本: 两手空空心空空-艺凌