【音畫】天山上聖潔的雪蓮花

闲云

水墨含香 发表于 2024-11-18 18:23
欣赏学习了，老师好，能把你这代码发出来吗，我也想发一个这样高度的音画 ...

1. <div style="position:absolute;z-index:32768;background:none;width:100%;left:0px;margin-top:86px;">
   
2. <table align="center" bgcolor="blue" cellpadding="0" cellspacing="0" style="border-width: 160px 160px 0px 0px; border-color: currentColor; left: 0px; top: -0px; width: 1010px; position: relative;">
   
3.         <tbody>
   
4.                 <tr>        <td>
   
5.                         <div style="text-align: center;"> </div>
   
6.                         <div style="text-align: center;"></div>
   
7.                         <div class="cont-area">
   
8.                         <div align="center" style="MARGIN-TOP: 0px; MARGIN-LEFT: 0px">
   
9.                         <br><table align="center" background="https://pic.imgdb.cn/item/641be515a682492fcc372599.jpg" border="4" cellpadding="3" cellspacing="18" height="100" style="border-color: rgb(255, 0, 0);" title="古来稀编制" width="800">
   
10.                                 <tbody>
    
11.                                         <tr>
    
12.                                                 <td>
    
13.                                                 <div style="text-align: center;"><b> <span style="background-color: initial;"> </span></b></div><div style="text-align: center;"><span style="background-color: initial;"><b><br></b></span></div>
    
14.                                                 <div style="text-align: center;"><font face="华文中宋" size="8"><b style=""><font style="" color="#00ffff">【音畫】</font></b></font></div><div style="text-align: center;"><font face="华文中宋" size="8"><b style=""><font style="" color="#00ffff">天山上聖潔的雪蓮花</font></b></font></div><div style="text-align: center;"><br></div><div style="text-align: center;"><font color="#ffffff" face="华文中宋" size="6"><br></font></div><div style="text-align: center;"><font color="#ffffff" face="华文中宋" size="5">作者：闲云     素材：网络</font></div><div style="text-align: center;"><font color="#ffffff" face="华文中宋" size="5"><br></font></div><div style="text-align: center;"><br></div><div style="text-align: center;"><div style="text-align: center;"><div class="cont-area">
    
15. <div class="nbw-blog-start></p>
    
16. </div>
    
17. <div center="><marquee>
    
18. <div align="center"><span style="font-size:32px;"><span style="font-family:宋体;"><span style="color: rgb(255, 0, 0);"><span style="display: none;">  </span><span style="display: none;"> </span>★★</span><span style="color: rgb(46, 204, 113);"><font color="DeepSkyBlue"><font color="Cyan"><b>《☆ 離退休論壇的老年朋友健康長壽☆》</b></font></font></span><span style="color: rgb(255, 0, 0);">★★</span></span></span><span style="color: rgb(241, 196, 15);"><span style="font-size: 26px;"><span style="color: rgb(241, 196, 15);"><span style="font-size: 26px;"> </span></span></span></span></div>
    
19. </marquee>
    
20. <div class="nbw-blog-start">
    
21. <p>
    
22. </p><div style="width: 910px;height: 1562px;box-shadow:  0px 0px 1px 2px #006400, 0px 0px 0px 8px #eefef1,0px 0px 5px 15px #006400;overflow:hidden;border-radius:1%;margin-top:10px;margin-LEFT: 0px;">
    
23. <div style="width: 910px; height: 1562px; margin-top:0px; margin-left: 0px;box-shadow: 0px 0px 0px 0px #045768,0px 0px 0px 0px #99e5f5, 0px 0px 0px 0px #045768; border-radius:0%; overflow:hidden;transform:rotate(0deg);background:url('//yzf0319.com/2022/3yue/txtp/5656.gif')0 0/100%  100%,url('https://pic.imgdb.cn/item/673ac32ed29ded1a8c481b37.jpg')0 0/150%  100%; text-align: center;"><img alt="" class="photo" src="https://pic.imgdb.cn/item/673abbc0d29ded1a8c41f8c5.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673abbc1d29ded1a8c41f924.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673abbddd29ded1a8c420b42.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673abbddd29ded1a8c420ba6.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673abbded29ded1a8c420cc1.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673abbdfd29ded1a8c420d5f.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673abbdfd29ded1a8c420dd5.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673abbe0d29ded1a8c420eea.jpg"></div></div></div></div></div></div></div><div style="text-align: center;"><div style="text-align: center;"><div style="text-align: center;"><div style="text-align: center;"><div id="动画"><div id="img:"><div id="旋转木马"><br></div><div id="旋转木马"><br></div>
    
24. </div><style type="text/css">.photo {width: 1200px;
    
25.   height: 1562px;
    
26.   position: absolute;top:0px; left:0px;z-index: 300;
    
27.   animation: round 48s infinite;
    
28.   opacity: 0;}
    
29. @keyframes round {1% {
    
30. opacity: 0;
    
31. transform:translate(100%,0%)scale(0);}
    
32. 5% {
    
33. opacity: 1;
    
34. transform:translate(100%,0%)scale(0);}
    
35. 14% {
    
36. opacity: 1;
    
37. transform:translate(0%,0%)scale(1);}
    
38. 16% {
    
39. opacity: 1;
    
40. transform:translate(0%,0%)scale(1);}
    
41. 24% {
    
42. opacity: 0;
    
43. transform:translate(-100%,0%)scale(1);}
    
44. }
    
45. img:nth-child(8) {animation-delay: 42s;}
    
46. img:nth-child(7) {animation-delay: 36s;}
    
47. img:nth-child(6) {animation-delay: 30s;}
    
48. img:nth-child(5) {animation-delay: 24s;}
    
49. img:nth-child(4) {animation-delay: 18s;}
    
50. img:nth-child(3) {animation-delay: 12s;}
    
51. img:nth-child(2) {animation-delay: 6s;}
    
52. </style><style type="text/css">#动画{
    
53. background-image:url();}
    
54. #旋转木马 img{
    
55. width:30px;
    
56. height: 30px;
    
57. position: absolute;
    
58. left:0px;
    
59. top:-135px;
    
60. border:7px Lime double;
    
61. border-radius: 150px;
    
62. }
    
63. #旋转木马 img:nth-child(1){
    
64. transform: rotateY(0deg) translateZ(40px);
    
65. }
    
66. #旋转木马 img:nth-child(4){
    
67. transform: rotateY(180deg) translatez(40px);
    
68. }
    
69. #旋转木马 img:nth-child(5){
    
70. transform: rotateY(240deg) translatez(40px);
    
71. }
    
72. #旋转木马 img:nth-child(6){
    
73. transform: rotateY(300deg) translatez(40px);
    
74. }
    
75. #旋转木马{
    
76. margin: 30px auto;/*让父元素居中*/
    
77. width: 30px;
    
78. height: 30px;
    
79. transform-style: preserve-3d;
    
80. animation-name: 起伏木马;
    
81. animation-duration: 10s; /*动画完成一个周期需用的秒数*/
    
82. animation-iteration-count: infinite; /*动画循环无限 */
    
83. animation-timing-function: linear;
    
84. position: relative;
    
85. }
    
86. @keyframes 起伏木马 {
    
87. 100%{transform: rotateX(0deg) rotateY(0deg) ;}
    
88. 100%{transform: rotateX(10deg) rotateY(180deg) ;}
    
89. 100%{transform: rotateX(0deg) rotateY(360deg) ;}
    
90. 100%{transform: rotateX(-10deg) rotateY(540deg) ;}
    
91. 100%{transform: rotateX(0deg) rotateY(720deg) ;} }
    
92. </style>
    
93. <div style="margin-top: -111px; margin-left: 0px;">
    
94. <p style=" text-align:="><marquee behavior="alternate" scrollamount="7"><img alt="" src="https://pic.imgdb.cn/item/671caec9d29ded1a8c0b3d9a.png" style="width: 160px; height: 161px;filter:contrast(100%); opacity: 100;"><img alt="" src="https://pic.imgdb.cn/item/671caec9d29ded1a8c0b3da3.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671caec9d29ded1a8c0b3dae.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 100;"><img alt="" src="https://pic.imgdb.cn/item/671d94f0d29ded1a8cc3c78b.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671d9178d29ded1a8cc17c7f.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 100;"><img alt="" src="https://pic.imgdb.cn/item/671d94f0d29ded1a8cc3c792.png" style="width: 160px; height: 161px; filter:contrast(110%);opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671d9178d29ded1a8cc17c98.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671d9178d29ded1a8cc17ca2.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671caec9d29ded1a8c0b3d9a.png" style="width: 160px; height: 161px;filter:contrast(100%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671caec9d29ded1a8c0b3da3.png" style="width: 160px; height: 161px; filter:contrast(110%);opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671caec9d29ded1a8c0b3dae.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671d94f0d29ded1a8cc3c78b.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671d9178d29ded1a8cc17c7f.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 100;"><img alt="" src="https://pic.imgdb.cn/item/671d94f0d29ded1a8cc3c792.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671d9178d29ded1a8cc17c98.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 100;"><img alt="" src="https://pic.imgdb.cn/item/671d9178d29ded1a8cc17ca2.png" style="width: 160px; height: 161px; filter:contrast(110%);opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671caec9d29ded1a8c0b3d9a.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671caec9d29ded1a8c0b3da3.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671caec9d29ded1a8c0b3dae.png" style="width: 160px; height: 161px;filter:contrast(100%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671d94f0d29ded1a8cc3c78b.png" style="width: 160px; height: 161px; filter:contrast(110%);opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671d9178d29ded1a8cc17c7f.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671d94f0d29ded1a8cc3c792.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 47;"><img alt="" src="https://pic.imgdb.cn/item/671d9178d29ded1a8cc17c98.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 100;"><img alt="" src="https://pic.imgdb.cn/item/671d9178d29ded1a8cc17ca2.png" style="width: 160px; height: 161px;filter:contrast(110%); opacity: 47;"></marquee></p>
    
95. <p></p></div><div style="text-align: center;"><div align="center"><p></p>
    
96. <div style="LEFT: -30px; WIDTH: 920px; POSITION: relative; TOP: 0px"><font face="华文中宋" color="#ffffff" size="6"><b><p><iframe allowfullscreen="true" border="0" frameborder="no" framespacing="0" height="500" scrolling="no" src="//player.bilibili.com/player.html?isOutside=true&amp;aid=1650532196&amp;bvid=BV1Tj421X7ue&amp;cid=1440790521&amp;p=1" width="922"></iframe></p></b></font></div><div style="LEFT: 0px; WIDTH: 910px; POSITION: relative; TOP: -4px"><font face="华文中宋" color="#ffffff" size="6"><b>
    
97. </b></font></div></div><p></p><div align="center"><font face="华文中宋" color="#ffffff" size="6"><b><marquee style="font-size: 26pt; width: 80%; line-height: 150%; font-family: 华文中宋;" scrollamount="5" behavior="alternate" font=""><strong><font color="#ff0000">離退休論壇歡迎您</font></strong></marquee></b></font></div><p></p></div></div></div></div></div></div></td></tr></tbody></table><br><p></p></div></div></td></tr>
    
98. </tbody></table><p align="center" style="text-align: center;"></p></div>
    
99. <div style="height:2940px"></div><center><br>
    
100. </center>
     

复制代码

咕咚来了

水墨含香 发表于 2024-11-18 18:27
老师您好，欣赏并学习了。老师，能把您这组代码发出来么，我也想发一个这样高度的音画 ...

给你代码也不行，你还要上传图片……不要急，要慢慢学。

月婵

漂亮啊！欣赏【音畫】天山上聖潔的雪蓮花 精华作品！
歌曲动听，雪莲花美丽！

闲云

月婵 发表于 2024-11-18 19:45
漂亮啊！欣赏【音畫】天山上聖潔的雪蓮花 精华作品！
歌曲动听，雪莲花美丽！ ...

非常感谢月婵老师的关注支持，晚上好！

筱亭

歌曲悦耳，画面养眼，欣赏学习了

闲云

筱亭 发表于 2024-11-19 03:50
歌曲悦耳，画面养眼，欣赏学习了

非常感谢筱亭贤弟的关注支持，上午好！

筱亭

闲云 发表于 2024-11-19 08:11
非常感谢筱亭贤弟的关注支持，上午好！

大哥不客气，中午好