朵拉 发表于 2024-6-11 20:46

是想你的声音啊（马黑黑原创）

本帖最后由 朵拉 于 2024-6-11 21:08 编辑 <br /><br /><style>
#tz { margin: 30px 0 30px calc(50% - 591px); width: 1024px; height: 680px; background: url('https://pic.imgdb.cn/item/666847a0d9c307b7e91512c5.jpg') 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: 50px;}
#player::before, #player::after { position: absolute; content: ''; }
#player::before { width: var(--btnSize); height: var(--btnSize); top: calc(var(--btnSize) * -1 - 5px); background: url('https://638183.freep.cn/638183/t23/btn/f5.png') 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: 100%; 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=2163953992" loop autoplay></audio>
      <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/36/5d1ec038a435c.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-11 21:05

欣赏佳作，问候朵拉。

朵拉 发表于 2024-6-11 21:09

梦油 发表于 2024-6-11 21:05
欣赏佳作，问候朵拉。

梦油老师 晚上好，您的速度真快{:4_190:}

朵拉 发表于 2024-6-11 21:09

@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:}

马黑黑 发表于 2024-6-11 21:11

挺好的。可以考虑多一点自己的设计理念和元素

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

漂亮，欣赏朵宝好帖{:4_204:}

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

欣赏朵拉精彩的制作{:4_199:}

朵拉 发表于 2024-6-11 21:19

马黑黑 发表于 2024-6-11 21:11
挺好的。可以考虑多一点自己的设计理念和元素

老师指点的极是，奈何学生手机编辑制作，
倘若哪天用上电脑，必定大杀四方，嘿嘿

南无月 发表于 2024-6-11 22:18

换了个背景效果就这么好，真是太绝了。。{:4_187:}非常漂亮

梦油 发表于 2024-6-12 17:14

朵拉 发表于 2024-6-11 21:09
梦油老师 晚上好，您的速度真快

不是我的速度快，而是你的作品吸引人。
页: [1]
查看完整版本: 是想你的声音啊（马黑黑原创）