绿叶清舟 发表于 2024-7-2 21:24

云自无心


<style>
      #tz { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: 1100px; height: 1380px; background: url('https://p.upyun.com/demo/tmp/9IckkWlh.webp') no-repeat center/cover; overflow: hidden; z-index: 1; box-shadow: 2px 2px 3px gray; position: relative; }
      #tz::before { content: attr(data-lrc); position: absolute; top: 10px; width: 100%; height: 60px; font: bold 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, silver, tan, white, tan, silver) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px #333); text-align: center; }
      #player { position: absolute; left: 920px; top: 1290px; width: 80px; height: 80px; border-radius: 50%; background: #a0bbbe; box-shadow: inset 0 0 6px white, 0 0 18px #c9dadc; cursor: pointer; opacity: .8; transition: 1s; animation: rot 6s linear infinite var(--state); }
      #player::after { position: absolute; content: ''; left: calc(50% - 10px); top: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; background: #9cb8bb; }
      #player:hover { width: 90px; height: 90px; }
      .vid { position: absolute; bottom: 1380; width: 100%; height: calc(30% + 10px); object-fit: cover; mix-blend-mode: screen; }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="tz" data-lrc="HUACHAO">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2600215681" autoplay loop></audio>
      <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay loop muted></video>
      <div id="player" title="播放/暂停"></div>
</div>

<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
document.body.appendChild(sf);
player.style.backgroundImage = 'conic-gradient(' + '#a8c0c3,#638d91,#90b0b3,transparent,teal,'.repeat(15).slice(0, -1) + ')';
var lrc = ``;
</script>

红影 发表于 2024-7-2 22:01

这个小播调得好漂亮啊，和背景也十分相配。
清舟的制作好美{:4_199:}

冬天的雨 发表于 2024-7-3 07:55

清舟好久不见{:4_187:}

梦江南 发表于 2024-7-3 08:25

欣赏老师美帖！问好！{:4_199:}

绿叶清舟 发表于 2024-7-4 21:01

红影 发表于 2024-7-2 22:01
这个小播调得好漂亮啊，和背景也十分相配。
清舟的制作好美

谢谢影，本来想做另一个的，结果二个视频放上去太难调了就整了这个{:4_189:}

绿叶清舟 发表于 2024-7-4 21:01

冬天的雨 发表于 2024-7-3 07:55
清舟好久不见

冬雨来了啊，好久不见

绿叶清舟 发表于 2024-7-4 21:02

梦江南 发表于 2024-7-3 08:25
欣赏老师美帖！问好！

谢谢江南，晚上好

红影 发表于 2024-7-4 22:35

绿叶清舟 发表于 2024-7-4 21:01
谢谢影，本来想做另一个的，结果二个视频放上去太难调了就整了这个

这个文字也调得漂亮，和背景那么浑然一体呢{:4_187:}
页: [1]
查看完整版本: 云自无心