绿叶清舟 发表于 2024-6-12 21:08

红茶馆


<style>
#tz { margin: 30px 0 30px calc(50% - 701px); width: 1200px; height: 800px; background: url('https://p.upyun.com/demo/tmp/FYpAPH59.webp') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
#lrc { position: absolute; top: 20px; font: normal 30px sans-serif; text-shadow: 1px 1px 1px white; background: linear-gradient(to right, red, blue,green, red); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(-1px -1px 6px gray); user-select: none; animation: swear 6s linear infinite alternate var(--state); }
#player { position: absolute; left: calc(50% - 140px); bottom: 20px; width: 280px; height:10px; background: linear-gradient(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: rgba(170, 70, 140, .8); --prg: 0%; --btnSize: 100px;}
#player::before, #player::after { position: absolute; content: ''; }
#player::before { width: var(--btnSize); height: var(--btnSize); top: calc(var(--btnSize) * -1 - 5px); background: url('https://p.upyun.com/demo/tmp/NrFSJorK.webp') no-repeat center/cover; animation: rot 6s linear infinite var(--state);}
#player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }
.vid { position: absolute; bottom: 0; width: 120%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; opacity: .5; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes swear {
      from { transform: perspective(400px) rotateY(20deg); }
      to { transform: perspective(400px) rotateY(-20deg); }
}
</style>

<div id="tz">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=212356.mp3" autoplay loop></audio>
      <video class="vid" src="https://img.tukuppt.com/video_show/15653652/00/79/49/60c1b75840a4d.mp4" autoplay loop disablePictureInPicture muted></video>
      <div id="lrc">HUA CHAO PLAYER</div>
      <div id="player"></div>
</div>

<script>
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = 'https://638183.freep.cn/638183/web/js2024/tube3dlrc.js';
      document.body.appendChild(script);
      var lrcAr = [ , , ];
</script>

醉美水芙蓉 发表于 2024-6-12 21:11

绿叶清舟 发表于 2024-6-12 21:30

醉美水芙蓉 发表于 2024-6-12 21:11
欣赏清舟美贴！

谢谢芙蓉支持

红影 发表于 2024-6-12 21:35

这茶馆真够红的，漂亮的飞舞歌词。标题也漂亮，还有视频点缀。
欣赏清舟好帖{:4_199:}

红影 发表于 2024-6-12 21:35

让茶杯转起来，不怕茶水都倒出来啊{:4_170:}

红影 发表于 2024-6-12 21:36

这场景好有韵味，漂亮{:4_199:}

绿叶清舟 发表于 2024-6-12 21:37

红影 发表于 2024-6-12 21:35
让茶杯转起来，不怕茶水都倒出来啊

那才叫本事啊{:4_189:}

绿叶清舟 发表于 2024-6-12 21:39

红影 发表于 2024-6-12 21:35
这茶馆真够红的，漂亮的飞舞歌词。标题也漂亮，还有视频点缀。
欣赏清舟好帖

本来想的是茶红色的，可能背景不够暗，红色图片一上去就红了些，再一加视频就更红了

梦油 发表于 2024-6-12 21:47

红茶馆一片红{:5_116:}

樵歌 发表于 2024-6-13 07:40

想起了老电影里的大上海红灯区{:4_189:}

朵拉 发表于 2024-6-13 10:57

好看 好听~~{:4_204:}

红影 发表于 2024-6-13 14:23

绿叶清舟 发表于 2024-6-12 21:37
那才叫本事啊

我看着真担心，怕哪次没转好让水流出来{:4_189:}

红影 发表于 2024-6-13 14:24

绿叶清舟 发表于 2024-6-12 21:39
本来想的是茶红色的，可能背景不够暗，红色图片一上去就红了些，再一加视频就更红了

也挺好，朦胧的红，很有神秘感{:4_187:}

小文 发表于 2024-6-13 21:30

欣赏清舟好帖

小辣椒 发表于 2024-6-13 21:49

哇塞，刚想下了，看见清舟这个红茶馆，惊艳了{:4_178:}

小辣椒 发表于 2024-6-13 21:49

意境太美了。清舟就是棒！每个图都那么出彩{:4_199:}

绿叶清舟 发表于 2024-6-15 20:12

红影 发表于 2024-6-13 14:23
我看着真担心，怕哪次没转好让水流出来

流出来正好有茶喝了啊{:4_189:}

绿叶清舟 发表于 2024-6-15 20:12

小辣椒 发表于 2024-6-13 21:49
哇塞，刚想下了，看见清舟这个红茶馆，惊艳了

辣椒好，来喝口不{:4_190:}

绿叶清舟 发表于 2024-6-15 20:18

梦油 发表于 2024-6-12 21:47
红茶馆一片红

感觉颜色没有控制到位了

绿叶清舟 发表于 2024-6-15 20:19

樵歌 发表于 2024-6-13 07:40
想起了老电影里的大上海红灯区

樵歌去玩过没
页: [1] 2
查看完整版本: 红茶馆