绿叶清舟 发表于 2023-4-23 12:29

This Love - Sarah Brightman


<style>
      #papa { left: -250px; width: 1100px; height: 700px; background: #ccc url('https://pic1.imgdb.cn/item/6444ab780d2dde577736441c.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
      #mplayer { position: absolute; bottom: 0; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
      #mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
      #mplayer:hover #btnwrap { background: linear-gradient(to top right, purple, orange); border-radius: 50%; opacity: .75; }
      #btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
      #btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: 0; }
      #btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
      #btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
      #prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, #968b80, #0e5c80 100%, transparent 0); border: 1px solid tan; font: normal 14px / 16px sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; opacity: .8; }
      .star5 { position: absolute; background: transparent; top: -0px; left: -0px; font: normal 12px /12px sans-serif; offset-distance: 0%; offset-path: path("m653.5,170.5c0,0 44,-12 43.5,-12.5c0.5,0.5 42.5,-15.5 42,-16c0.5,0.5 54.5,-27.5 54,-28c0.5,0.5 30.5,-32.5 30,-33c0.5,0.5 16.5,-31.5 16,-32c0.5,0.5 -4.5,-18.5 -5,-19c0.5,0.5 -13.5,2.5 -14,2c0.5,0.5 -18.5,25.5 -19,25c0.5,0.5 -17.5,21.5 -18,21c0.5,0.5 -7.5,18.5 -8,18c0.5,0.5 -36.5,66.5 -37,66c0.5,0.5 -36.5,44.5 -37,44c0.5,0.5 -31.5,14.5 -32,14c0.5,0.5 -33.5,0.5 -34,0c0.5,0.5 -7.5,-11.5 -8,-12c0.5,0.5 13.5,-7.5 13,-8c0.5,0.5 28.5,4.5 28,4c0.5,0.5 52.5,21.5 52,21c0.5,0.5 31.5,4.5 31,4c0.5,0.5 38.5,-3.5 38,-4c0.5,0.5 39.5,-12.5 39,-13c0.5,0.5 18.5,-25.5 18,-26c0.5,0.5 -1.5,-15.5 -2,-16c0.5,0.5 -14.5,-9.5 -15,-10c0.5,0.5 -15.5,6.5 -16,6c0.5,0.5 -13.5,19.5 -14,19c0.5,0.5 -1.5,21.5 -2,21c0.5,0.5 24.5,21.5 24,21c0.5,0.5 25.5,-5.5 25,-6c0.5,0.5 16.5,-13.5 16,-14c0.5,0.5 14.5,-27.5 14,-28c0.5,0.5 1.5,-12.5 1,-13c0.5,0.5 -10.5,-7.5 -11,-8c0.5,0.5 -6.5,11.5 -7,11c0.5,0.5 4.5,23.5 4,23c0.5,0.5 12.5,25.5 12,25c0.5,0.5 15.5,10.5 15,10c0.5,0.5 12.5,-11.5 12,-12c0.5,0.5 21.5,-39.5 21,-40c0.5,0.5 -6.5,-10.5 -7,-11c0.5,0.5 -9.5,9.5 -10,9c0.5,0.5 1.5,11.5 1,11c0.5,0.5 16.5,16.5 16,16c0.5,0.5 23.5,3.5 23,3c0.5,0.5 26.5,-3.5 26,-4c0.5,0.5 16.5,-16.5 16,-17c0.5,0.5 -5.5,-13.5 -6,-14c0.5,0.5 -13.5,-2.5 -14,-3c0.5,0.5 -16.5,9.5 -17,9c0.5,0.5 -13.5,12.5 -14,12c0.5,0.5 -6.5,9.5 -7,9c0.5,0.5 -5.5,18.5 -6,18c0.5,0.5 7.5,13.5 7,13c0.5,0.5 29.5,4.5 29,4c0.5,0.5 23.5,-4.5 23,-5c0.5,0.5 34.5,-6.5 34,-7c0.5,0.5 32.5,-10.5 32,-11c0.5,0.5 25.5,-13.5 25,-14c0.5,0.5 26.5,-20.5 26,-21"); text-shadow: 0 0 12px rgba(199,245,122,.75); animation: move 18s var(--ss) linear infinite; }
      
      @keyframes move{to{offset-distance:100%}}
</style>

<div id="papa">
      
      <div id="mplayer">
                <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
                <div id="prog">00:00 | 00:00</div>
      </div>
</div>

<script>
let mKey = 0, mFlag = true, aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
Array.from({length: 1}).forEach((ele,key) => {
      ele = document.createElement('span');
      ele.className = 'star5';
      ele.innerText = '\u2734';
      ele.style.cssText += `--ss: ${key * 0.5}s; color: #fef9e8;`;
      papa.appendChild(ele);
});

aud.src = 'http://music.163.com/song/media/outer/url?id=19168947.mp3';
aud.autoplay = true;
aud.loop = true;

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('timeupdate', () => {
      prog.style.background = 'linear-gradient(90deg,#968b80, #0e5c80 ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
      prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');

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;
};
</script>

马黑黑 发表于 2023-4-23 13:01

{:4_199:}

红影 发表于 2023-4-23 14:03

这文字的路径看着很复杂啊，清舟是怎么弄出来的，让那小点点一直都沿着文字路径。太厉害了{:4_199:}

红影 发表于 2023-4-23 14:05

这个帖子又时光色彩很奇妙的帖子，好漂亮{:4_187:}

亦是金 发表于 2023-4-23 14:19

问好绿叶清舟！制作精彩！想学习制作！{:4_187:}

梦油 发表于 2023-4-23 15:20

画面很有新意。

梦缘 发表于 2023-4-23 16:17

太棒了，很精彩！{:4_176:}

醉美水芙蓉 发表于 2023-4-23 16:44

小辣椒 发表于 2023-4-23 18:47

清舟这个路径设计太美了，按这个文字路径小辣椒不会做，向清舟学习{:4_187:}

樵歌 发表于 2023-4-23 19:27

爱情巨片开演啦{:4_173:}

冬天的雨 发表于 2023-4-23 23:17

美女 高科技的{:4_199:}

马黑黑 发表于 2023-4-24 07:26

小辣椒 发表于 2023-4-23 18:47
清舟这个路径设计太美了，按这个文字路径小辣椒不会做，向清舟学习

PS可以获取对象的路径，生成代码。低版本的ps或许需要安装插件。

小辣椒 发表于 2023-4-24 11:43

马黑黑 发表于 2023-4-24 07:26
PS可以获取对象的路径，生成代码。低版本的ps或许需要安装插件。

这个我不会呢，感觉要学习的东西太多了

谢谢黑黑指教

马黑黑 发表于 2023-4-24 11:55

小辣椒 发表于 2023-4-24 11:43
这个我不会呢，感觉要学习的东西太多了

谢谢黑黑指教

我只是提供个线索

绿叶清舟 发表于 2023-4-28 12:17

冬天的雨 发表于 2023-4-23 23:17
美女 高科技的

哪有这么高的啊

绿叶清舟 发表于 2023-4-28 12:17

小辣椒 发表于 2023-4-24 11:43
这个我不会呢，感觉要学习的东西太多了

谢谢黑黑指教

https://www.nhooo.com/svg-editor/
辣椒试试这个

绿叶清舟 发表于 2023-4-28 12:17

樵歌 发表于 2023-4-23 19:27
爱情巨片开演啦

结局看到了没啊{:4_189:}

绿叶清舟 发表于 2023-4-28 12:19

醉美水芙蓉 发表于 2023-4-23 16:44
清舟厉害！制作漂亮！

谢谢芙蓉，有工具很容易的

绿叶清舟 发表于 2023-4-28 12:19

梦缘 发表于 2023-4-23 16:17
太棒了，很精彩！

谢谢梦缘

绿叶清舟 发表于 2023-4-28 12:20

亦是金 发表于 2023-4-23 14:19
问好绿叶清舟！制作精彩！想学习制作！

谢谢亦是金，中午好
页: [1] 2
查看完整版本: This Love - Sarah Brightman