朵拉 发表于 2024-4-24 19:46

他只是经过（马黑黑原创）

<style>
#papa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/6628f1ec0ea9cb14033fd452.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px rgba(0,0,0,.6); z-index: 1; display: grid; place-items: center; position: relative; }
#player { position: absolute; bottom: -10; width: 300px; height: 300px; cursor: pointer; z-index: 10; }
.vid { position: absolute; bottom: 0; width: 500px; height: 500px; object-fit: cover; mix-blend-mode: screen; }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1443838552" autoplay loop></audio>
    <video class="vid" src="https://638183.freep.cn/638183/vid/u01.mp4" loop muted></video>
    <div id="player" title="播放/暂停"></div>
</div>

<script>

var vids = document.querySelectorAll('.vid');
var sc = document.createElement('script');
sc.charset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js/dot-lz.js';
document.body.appendChild(sc);

var lz = {papa: '#papa', total: 100, r: 3, max_r: 15, step: 0.5, color: 'rgba(255,255,255,.7)', opacity: .9, move: false};

var mState = () => {
    vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
    lz.move = !aud.paused;
};

aud.onplaying = aud.onpause = () => mState();

player.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

朵拉 发表于 2024-4-24 20:03

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

马黑黑 发表于 2024-4-24 20:05

俺路过{:4_170:}

朵拉 发表于 2024-4-24 20:10

马黑黑 发表于 2024-4-24 20:05
俺路过

老师 您经过得刚好~~{:4_190:}{:4_173:}

马黑黑 发表于 2024-4-24 20:11

朵拉 发表于 2024-4-24 20:10
老师 您经过得刚好~~

经过不敢，还是路过吧，路过不碍事{:4_170:}

朵拉 发表于 2024-4-24 20:45

马黑黑 发表于 2024-4-24 20:11
经过不敢，还是路过吧，路过不碍事

✔️，坚定一个人的时候其他人都是路人{:4_195:}

马黑黑 发表于 2024-4-24 20:46

朵拉 发表于 2024-4-24 20:45
✔️，坚定一个人的时候其他人都是路人

{:4_172:}

南无月 发表于 2024-4-24 21:08

这个图片的光影真美，
小播的位置正处于光照的蒲公英中心处。。
加上四周飞散的粒子。。
形成绝佳效果。。{:4_204:}

红影 发表于 2024-4-24 21:21

漂亮。朵宝的这个帖子真美。{:4_199:}

红影 发表于 2024-4-24 21:22

这个调整了视频按钮的位置，貌似每调伪元素的位置，手型的标志还是在下部，没在按钮区域呢{:4_173:}

走过岁月 发表于 2024-4-25 13:13

真美，我不是经过，是特意来欣赏的

小辣椒 发表于 2024-4-26 14:01

欣赏朵拉漂亮的制作{:4_199:}

小辣椒 发表于 2024-4-26 14:02

走过岁月 发表于 2024-4-25 13:13
真美，我不是经过，是特意来欣赏的

我也不是经过，是特意来欣赏的
页: [1]
查看完整版本: 他只是经过（马黑黑原创）