音画代码分享（4楼更新前景动画代码）

穆菁

<div style="position:absolute;z-index:32768;background:none;width:100%;left:0px;margin-top:150px;">
<img src="图1">
<img src="图2">
<img src="图3">
<img src="图4">

<embed style="LEFT:250px; POSITION: absolute; TOP:500px; absolute: " align="right" src="动画.swf" width="1000" height="500" type="application/x-shockwave-flash" wmode="transparent" quality="high" ;;="">
<div align="left"><audio style="width:5px;height:5px;" controls="controls" autoplay="autoplay" loop="loop" src="https://music.163.com/song/media/outer/url?id=音乐.mp3" type="audio/mpeg"></audio></div>
</div>
<div style="height:1000px"></div>
<br><br> <br><br> <br><br> <br><br>





因各种发帖原因导致无法点击编辑和修改 套用公式

1. http://www.wyc520.com.cn/forum.php?mod=post&action=edit&fid=版区ID&tid=帖子ID&pid=楼层ID
   

复制代码

主楼的pid地址，可以通过右键---源代码---搜索 pid 提取获得ID地址（一般为搜索第一个）
其他楼层，右键楼层码，复制链接，提取pid 获得ID地址

穆菁

网页下方滚动条可移动，移动设备下全屏显示
测试，爱网论坛可用。

1. 
   
2. 
   
3. <div style="position: relative; background:none;width:100%;left:-224px;top: 150px;">
   
4. <img src="图地址">
   
5. 
   
6. <div align="left"><audio style="width:0px;height:0px;" controls="controls" autoplay="autoplay" loop="loop" src="https://music.163.com/song/media/outer/url?id=音乐地址.mp3" type="audio/mpeg"></audio></div>
   
7. 
   
8. </div>
   
9. <br><br> <br><br> <br>
   
10. 
    

复制代码

哑弦

好东西~

穆菁

建议大家切片上传，上传和打开速度都会快些许

1. <div style="margin: 0 0 0 calc(50% - 880px);display: grid;place-items: center;width: 1650px;height: 900px;top:230px;background: lightblue url('https://img.wyc520.com.cn/data/attachment/forum/202406/04/230601bojunc5f7uf5ruj7.jpg') no-repeat center/cover;user-select: none;overflow: hidden;position: relative;z-index: 1;--state: running;">
   
2. <img src="https://img.wyc520.com.cn/data/attachment/forum/202406/04/230601bojunc5f7uf5ruj7.jpg">
   
3. <style>
   
4. <style>
   
5. #vid1 {
   
6.         position: absolute;
   
7.         width: 12%;
   
8.         height: 12%;               
   
9.         top:250px;
   
10.       left:1100px;
    
11.        transform: rotateY(180deg);
    
12.         object-fit: cover;
    
13.         pointer-events: none;
    
14.         mix-blend-mode: screen;
    
15.         z-index: 5;
    
16.         opacity: .49;
    
17. }
    
18. 
    
19. #vid2 {
    
20.         position: absolute;
    
21.         width: 100%;
    
22.         height: 100%;               
    
23.         top:0px;
    
24.       transform: rotateY(180deg);
    
25.         object-fit: cover;
    
26.         pointer-events: none;
    
27.         mix-blend-mode: screen;
    
28.         z-index: 5;
    
29.         opacity: .49;
    
30. }
    
31. </style>
    
32. <img  id="vid1"  src="https://gd-hbimg.huaban.com/2100e5f87562a09c3dd39b47c6dbce08399554ac1bdcfe-s5VTGt" >
    
33. <img id="vid2" src="https://gd-hbimg.huaban.com/0b622a7070f9e93de473ee58b88d7435b6e635614b20ec-M8J5xt_fw1200">
    
34. <img id="vid2" src="https://gd-hbimg.huaban.com/dcb4d6e79acb001b99820b522a9c973ebdda86191a158-pXqLwt_fw1200">
    
35. </div>
    
36. <div align="left"><audio style="width:5px;height:5px;" controls="controls" autoplay="autoplay" loop="loop" src="https://music.163.com/song/media/outer/url?id=33223321.mp3" type="audio/mpeg"></audio></div>
    
37. <br><br> <br><br> <br><br> <br><br>
    

复制代码

vid2 ：全图覆盖性动画样式
vid1：局部小动画，需要自己定位
素材很普及，请自行网络寻找合适的黑底 GIF素材，
音画图深色效果明显

                               
登录/注册后可看大图

---

音画加1个动态效果和1个GIF动画代码
https://wyc520.com.cn/forum.php?mod=viewthread&tid=445091

---

音画加一个动态效果代码
https://wyc520.com.cn/forum.php?mod=viewthread&tid=445092

---

音画加2个动态效果代码
https://wyc520.com.cn/forum.php?mod=viewthread&tid=445093

阙歌

阙歌

辛苦了,

千千羽

穆青辛苦了，谢谢。俺收藏了，

绣色

謝謝分享~

小满．

谢谢青姑娘!

之初

感谢分享，用时来学习一下