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

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: -80px 0 0 calc(50% - 400px);
   
4.         width: 800px;
   
5.         height: 900px;
   
6.         background: url('https://638183.freep.cn/638183/t23/1/vbjb.webp') no-repeat 0 center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         transition: all 1.2s;
   
9.         cursor: pointer;
   
10.         position: relative;
    
11.         z-index: 1;
    
12. }
    
13. 
    
14. #papa:hover {
    
15.         background: url('https://638183.freep.cn/638183/t23/1/vbjbxf.jpg') no-repeat center/cover;
    
16. }
    
17. 
    
18. </style>
    
19. 
    
20. <div id="papa">
    
21.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1420440566" loop autoplay></audio>
    
22. </div>
    
23. 
    
24. <script>
    
25. papa.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
    
26. </script>
    

复制代码

马黑黑

简单解释

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

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

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

马黑黑

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

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

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

焱鑫磊

欣赏老师佳作！

大漠孤烟

喜庆

红影

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

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

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

红影

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

红影

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

红影

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

梦油

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

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

马黑黑

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

马黑黑

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

马黑黑

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

马黑黑

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

节日好

马黑黑

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

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

马黑黑

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

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

进口的

马黑黑

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

老孙就是爱使坏