朵拉 发表于 2024-6-24 22:50

千年泪（马黑黑原创）

本帖最后由 朵拉 于 2024-6-24 23:22 编辑 <br /><br /><style>
      @import 'https://638183.freep.cn/638183/web/css/yslrc.css';
      #tz { --ox: 81px; --lrc-top: calc(100% - 80px); --lrc-bg: radial-gradient(cyan, white, orange) center/120px 60px; width: 1080px; height: 655px; background: url('https://pic.imgdb.cn/item/667987b3d9c307b7e9b2aab6.jpg') no-repeat center/cover; margin: 30px 0; }
      #player { position: absolute; left: calc(50% - 110px); bottom: 20px; width: 45px; height: 45px; border-radius: 50%; border: thick groove; border-color: cyan orange yellow green; display: grid; place-items: center; transition: .8s; --opt: 1; }
#player::before, #player::after { position: absolute; content: '';width: 20px; height: 20px; background: orange; transition: .3s; cursor: pointer; }
      #player::before { clip-path: polygon(0 0, 0 100%, 100% 50%); opacity: calc(var(--opt) * 1); background: cyan; }
      #player::after { mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); -webkit-mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); opacity: calc(1 - var(--opt)); }
      #player:hover { transform: scale(1.1); filter: invert(.3) drop-shadow(0 0 20px black); }
      .vid { height: calc(50% + 5px); }
</style>

<div id="tz" class="tz" data-lrc="千年泪">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1971190557" autoplay loop></audio>
      <video id="vid" class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b48ded397d72.mp4" autoplay loop muted></video>
      <div id="player"></div>
</div>

<script>
var mState = () => {
      player.style.setProperty('--opt', +aud.paused);
      player.title = ['暂停','播放'][+aud.paused];
      aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2024-6-24 23:20

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

马黑黑 发表于 2024-6-24 23:22

{:4_190:}

红影 发表于 2024-6-25 13:28

欣赏朵宝好帖{:4_204:}

小辣椒 发表于 2024-6-25 14:21

欣赏朵拉精彩的制作，意境很美{:4_199:}

小辣椒 发表于 2024-6-25 14:21

感谢朵拉的精彩分享{:4_179:}

樵歌 发表于 2024-6-25 16:15

好美的梨花，好学生交优秀作业。{:4_187:}

朵拉 发表于 2024-6-25 16:53

樵歌 发表于 2024-6-25 16:15
好美的梨花，好学生交优秀作业。

还得是樵歌，眼力劲儿看出是梨花~~{:4_204:}{:4_190:}

樵歌 发表于 2024-6-25 19:32

朵拉 发表于 2024-6-25 16:53
还得是樵歌，眼力劲儿看出是梨花~~

嗯，梨花最纯洁了，一眼就看到了
页: [1]
查看完整版本: 千年泪（马黑黑原创）