马黑黑 发表于 2023-3-6 07:49

女王节贺帖：猪八戒背媳妇

本帖最后由 马黑黑 于 2023-3-6 07:52 编辑 <br /><br /><style>
#papa {
        margin: -80px 0 0 calc(50% - 400px);
        width: 800px;
        height: 900px;
        background: url('https://638183.freep.cn/638183/t23/1/vbjb.webp') no-repeat 0 center/cover;
        box-shadow: 3px 3px 20px #000;
        transition: all 1.2s;
        cursor: pointer;
        position: relative;
        z-index: 1;
}

#papa:hover {
        background: url('https://638183.freep.cn/638183/t23/1/vbjbxf.jpg') no-repeat center/cover;
}

</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1420440566" loop autoplay></audio>
</div>

<script>
papa.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

马黑黑 发表于 2023-3-6 07:51

帖子代码
<style>
#papa {
        margin: -80px 0 0 calc(50% - 400px);
        width: 800px;
        height: 900px;
        background: url('https://638183.freep.cn/638183/t23/1/vbjb.webp') no-repeat 0 center/cover;
        box-shadow: 3px 3px 20px #000;
        transition: all 1.2s;
        cursor: pointer;
        position: relative;
        z-index: 1;
}

#papa:hover {
        background: url('https://638183.freep.cn/638183/t23/1/vbjbxf.jpg') no-repeat center/cover;
}

</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1420440566" loop autoplay></audio>
</div>

<script>
papa.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>


马黑黑 发表于 2023-3-6 08:02

本帖最后由 马黑黑 于 2023-3-6 08:17 编辑

简单解释

本帖使用鼠标指针滑过的CSS伪类 :hover 实现背景图的更换，达到更换图片的动态交互效果。主元素设置了 transition 为 1.2 秒，令更换图片过程在这个时间区间内完成；transition 属性值中，all 是至关重要的关键字，表示所有的变化动作所用的时间，all 也可以是单独的CSS属性名称，比如 width 或 top 等。

凡CSS能设定的属性，都可以通过 :hover 伪类操纵。

帖子没有设计背景音乐播放控制按钮，要控制音乐的播放/暂停，通过单击元素本身，id="papa" 的 div 就是背景音乐的开关，所以给它设计一个手型鼠标指针。

马黑黑 发表于 2023-3-6 08:13

女王节的女王们，心中的白马王子不一定是帅帅的猪八戒，极可能是酷酷的唐僧。但是呢，背媳妇这事儿唐僧干不了，还是让老猪来吧。

老猪好歹也是元帅，位高权重，背媳妇时虽已退居二线，却对生活有着本能的执着的追求，妥妥的过美滋滋日子的王子。唐僧只会念经，中看不中用，过个节日搞游园也背不动媳妇，要不得的，藏手机里偷偷欣赏就好。

实在人发实在帖，灌水图个快乐。据悉水吧女王节为期三周放假半天，祝女王们开开心心快快乐乐！

焱鑫磊 发表于 2023-3-6 08:34

欣赏老师佳作！{:4_204:}

大漠孤烟 发表于 2023-3-6 09:06

喜庆

红影 发表于 2023-3-6 09:15

马黑黑 发表于 2023-3-6 08:02
简单解释

本帖使用鼠标指针滑过的CSS伪类 :hover 实现背景图的更换，达到更换图片的动态交互效果。主元 ...

鼠标切换图片，这个好。“帖子没有设计背景音乐播放控制按钮，要控制音乐的播放/暂停，通过单击元素本身”问题是看到手型指针的时候，就切换成老猪了啊，本来看人类多好{:4_173:}

红影 发表于 2023-3-6 09:19

这个好玩，过节么，就是要开开心心的啊。节日庆祝活动真的可以弄个这个环节呢，看看二师兄们有没有本事背得动女王，背不动的直接出局{:4_189:}

红影 发表于 2023-3-6 09:21

那张老猪的图图太有趣了，老猪真的以为背上的是娇滴滴的小娘子，实际是捣蛋的孙猴子{:4_170:}

红影 发表于 2023-3-6 09:22

笑一笑节日更欢乐。借黑黑好帖，同祝论坛的姐妹们女王节快乐{:4_177:}

梦油 发表于 2023-3-6 10:33

祝花潮女士们身体健康、青春永驻。

猪八戒背的这位“媳妇”可了不得。{:4_189:}

醉美水芙蓉 发表于 2023-3-6 11:58

醉美水芙蓉 发表于 2023-3-6 11:59

马黑黑 发表于 2023-3-6 12:03

醉美水芙蓉 发表于 2023-3-6 11:59
猪八戒背媳妇累的满头大汗，到头来一场空！

{:4_170:}

马黑黑 发表于 2023-3-6 12:13

焱鑫磊 发表于 2023-3-6 08:34
欣赏老师佳作！

{:4_180:}

马黑黑 发表于 2023-3-6 12:14

大漠孤烟 发表于 2023-3-6 09:06
喜庆

{:4_181:}

马黑黑 发表于 2023-3-6 12:14

醉美水芙蓉 发表于 2023-3-6 11:58
老师这个帖子真好玩！

节日好

马黑黑 发表于 2023-3-6 12:15

红影 发表于 2023-3-6 09:15
鼠标切换图片，这个好。“帖子没有设计背景音乐播放控制按钮，要控制音乐的播放/暂停，通过单击元素本身 ...

手型提醒访问者元素可以点击

马黑黑 发表于 2023-3-6 12:15

梦油 发表于 2023-3-6 10:33
祝花潮女士们身体健康、青春永驻。

猪八戒背的这位“媳妇”可了不得。

进口的{:4_170:}

马黑黑 发表于 2023-3-6 12:16

红影 发表于 2023-3-6 09:21
那张老猪的图图太有趣了，老猪真的以为背上的是娇滴滴的小娘子，实际是捣蛋的孙猴子

老孙就是爱使坏{:4_170:}
页: [1] 2 3 4 5
查看完整版本: 女王节贺帖：猪八戒背媳妇