【黑土恋音画】油菜花的春天

九品莲花

)0 0/100% 100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000);text-align: center;">

九品莲花

老师，你把代码换一下，虽然背景图片不显，但帖子居中，您试一下。

1. <div style="position:relative; width:960px;height:600px; box-shadow:0px 0px 1px 2px #466c02,0px 0px 0px 8px #d6f2a5,0px 0px 5px 15px #466c02; overflow:hidden;border-radius:3%; margin-top:130px;margin-left: -180px;">
   
2. <div style="position:absolute;top: 0px;left: 0px;">
   
3. <div style="width: 960px; height: 600px; margin-top:0px; margin-left:0px;overflow: hidden;transform:  rotate(0deg);background:url(<img id="aimg_Cq9HR" class="zoom" file="http://cccimg.com/view.php/ecf63f8c7ce747eb5c58509194ad1036.jpg" lazyloadthumb="1" border="0" alt="" />)0 0/100% 100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000);text-align: center;">
   
4. <style type="text/css">.container {
   
5.   margin: 0px auto;
   
6.   width: 960px;
   
7.   height: 600px;
   
8.   overflow: hidden;
   
9.   position: relative;
   
10. }
    
11. .square
    
12. {top: 0px;
    
13. left:0px;
    
14. position: absolute;border-radius:0%;
    
15. width: 960px;box-shadow: 0px 0px 0px 2px #ffffff;
    
16. height: 600px;}
    
17. 
    
18. 
    
19. .square:nth-child(1) {animation:change1 40s ease infinite;}
    
20. .stop :nth-child(1) { animation-play-state: paused; }
    
21. .square:nth-child(2) {animation:change2 40s ease infinite;}
    
22. .stop :nth-child(2) {  animation-play-state: paused; }
    
23. .square:nth-child(3) {animation:change3 40s ease infinite;}
    
24. .stop :nth-child(3) { animation-play-state: paused; }
    
25. .square:nth-child(4) {animation:change4 40s ease infinite;}   
    
26. .stop :nth-child(4) { animation-play-state: paused; }
    
27. 
    
28. 
    
29. @keyframes change1{
    
30. 100%   {  background:#000000;transform: scale(.6, .6)translate(-100%,100%);}
    
31. 95%   {  background:#000000;transform: scale(.4, .4)translate(-52%,52%) ;  }
    
32. 90%   {  background:#000000;transform: scale(.6, .6)translate(-52%,52%) ;  }
    
33. 85% {  background:red;transform: rotateX(0deg)rotateY(180deg)scale(.6, .6)translate(52%,-52%); }
    
34. 70%   {  background:#FF0000;transform: scale(.6, .6)translate(52%,-52%) ; }
    
35. 65%   {  background:#550000;transform: scale(.6, .6)translate(-52%,52%)rotateX(-45deg)rotateY(20deg); }
    
36. 60%   {  background:#FF0000;transform: scale(.6, .6)translate(-52%,-52%)rotateX(45deg)rotateY(20deg) ; }
    
37. 55%  {  background:#00FF00;transform: rotateX(-180deg)scale(.6, .6)translate(-52%,52%); }
    
38. 40%  {  background:#000080;transform: scale(.6, .6)translate(-52%,52%); }
    
39. 35%  {  background:#fff080;transform: scale(.6, .6)translate(-52%,-52%); }
    
40. 30%  {  background:#80000;transform: scale(.6, .6)translate(52%,-52%); }
    
41. 25%  {  background:#00ff00;transform: scale(.4, .4)translate(52%,-52%); }
    
42. 20%   {  transform:scale(.4, .4) rotate(360deg)translate(80%,-80%); }   
    
43. 15%  {  transform:scale(.3, .3)rotate(-360deg)translate(80%,-80%); }
    
44. 10% {  transform:scale(.3, .3) rotate(0deg)translate(80%,-80%);  }   
    
45. 0%  {  background:#00ff00;transform: scale(.6, .6)translate(100%,-100%); }
    
46. }
    
47. @keyframes change2{
    
48. 100%   {  background:#000000;transform: scale(.6, .6)translate(100%,-100%);}
    
49. 95%   {  background:#000000;transform: scale(.4, .4)translate(52%,-52%);}
    
50. 90%   {  background:#000000;transform: scale(.6, .6)translate(52%,-52%);}
    
51. 85% {  background:red;transform: rotateX(0deg)rotateY(-180deg)scale(.6, .6)translate(-52%,52%); }
    
52. 70%   {  background:#FF0000;transform: scale(.6, .6)translate(-52%,52%);}
    
53. 65%   {  background:#550000;transform: scale(.6, .6)translate(52%,-52%)rotateX(-45deg)rotateY(20deg); }
    
54. 60%   {  background:#FF0000;transform: scale(.6, .6)translate(52%,52%)rotateX(45deg)rotateY(20deg) ; }
    
55. 55%  {  background:#00FF00;transform: rotateX(180deg)scale(.6, .6)translate(52%,-52%); }
    
56. 40%  {  background:#000080;transform: scale(.6, .6)translate(52%,-52%); }
    
57. 35%  {  background:#fff080;transform: scale(.6, .6)translate(52%,52%) }
    
58. 30%  {  background:#800000;transform: scale(.6, .6)translate(-52%,52%); }
    
59. 25%  {  background:#00ff00;transform: scale(.4, .4)translate(-52%,52%); }
    
60. 20%   {  transform:scale(.4, .4) rotate(-360deg)translate(-80%,80%); }   
    
61. 15%  {  transform:scale(.3, .3)rotate(360deg)translate(-80%,80%); }
    
62. 10% {  transform:scale(.3, .3) rotate(0deg)translate(-80%,80%);  }   
    
63. 0%  {  background:#00ff00;transform: scale(.6, .6)translate(-100%,100%); }
    
64. }
    
65. @keyframes change3
    
66. { 100%   {  background:#000000;transform: scale(.6, .6)translate(-100%,-100%);  }
    
67. 95%   {  background:#000000;transform: scale(.4, .4)translate(-52%,-52%);  }
    
68. 90%   {  background:#000000;transform: scale(.6, .6)translate(-52%,-52%);  }
    
69. 85% {  background:red;transform: rotateX(180deg)rotateY(0deg)scale(.6, .6)translate(52%,52%); }
    
70. 70%   {  background:#FF0000;transform: scale(.6, .6)translate(52%,52%) ; }
    
71. 65%   {  background:#550000;transform: scale(.6, .6)translate(-52%,-52%)rotateX(-45deg)rotateY(20deg) ; }
    
72. 60%   {  background:#FF0000;transform: scale(.6, .6)translate(52%,-52%)rotateX(45deg)rotateY(20deg) ; }
    
73. 55%  {  background:#00FF00; transform: rotateX(0deg)rotateY(-180deg)scale(.6, .6)translate(52%,52%); }
    
74. 40%  {  background:#000080;transform: scale(.6, .6)translate(52%,52%); }
    
75. 35%  {  background:#fff080;transform: scale(.6, .6)translate(52%,-52%); }
    
76. 30%  {  background:#800000;transform: scale(.6, .6)translate(-52%,-52%); }
    
77. 25%  {  background:#00ff00;transform: scale(.4, .4)translate(-52%,-52%); }
    
78. 20%   {  transform:scale(.4, .4) rotate(360deg)translate(-80%,-80%); }   
    
79. 15%  {  transform:scale(.3, .3) rotate(-360deg)translate(-80%,-80%); }
    
80. 10% {  transform:scale(.3, .3) rotate(0deg)translate(-80%,-80%);  }   
    
81. 0%  {  background:#00ff00;transform: scale(.6, .6)translate(-100%,-100%); }
    
82. }
    
83. @keyframes change4
    
84. { 100%   {  background:#000000;transform: scale(.6, .6)translate(100%,100%);}
    
85. 95%   {  background:#000000;transform: scale(.4, .4)translate(52%,52%);}
    
86. 90%   {  background:#000000;transform: scale(.6, .6)translate(52%,52%);}
    
87. 85% {  background:red;transform: rotateX(-180deg)rotateY(0deg)scale(.6, .6)translate(-52%,-52%); }
    
88. 70%   {  background:#FF0000;transform: scale(.6, .6)translate(-52%,-52%);}
    
89. 65%   {  background:#550000;transform: scale(.6, .6)translate(52%,52%)rotateX(-45deg)rotateY(20deg) ; }
    
90. 60%   {  background:#FF0000;transform: scale(.6, .6)translate(-52%,52%)rotateX(45deg)rotateY(20deg) ; }
    
91. 55%  {  background:#00FF00; transform: rotateX(0deg)rotateY(180deg)scale(.6, .6)translate(-52%,-52%); }
    
92. 40%  {  background:#000080;transform: scale(.6, .6)translate(-52%,-52%); }
    
93. 35%  {  background:#fff080;transform: scale(.6, .6)translate(-52%,52%); }
    
94. 30%  {  background:#800000;transform: scale(.6, .6)translate(52%,52%); }
    
95. 25%  {  background:#00ff00;transform: scale(.4, .4)translate(52%,52%); }
    
96. 20%   {  transform:scale(.4, .4) rotate(-360deg)translate(80%,80%); }   
    
97. 15%  {  transform:scale(.3, .3)rotate(360deg)translate(80%,80%); }
    
98. 10% {  transform:scale(.3, .3) rotate(0deg)translate(80%,80%);  }   
    
99. 0%  {  background:#00ff00;transform: scale(.6, .6)translate(100%,100%); }
    
100. }
     
101. </style>
     
102. <div class="HT">
     
103. <div class="container" id="testImg">
     
104. <div class="square" id="testImg"><img src="http://cccimg.com/view.php/be4e96c25358d03dfa8d8cf770ddf56e.jpg" style="width: 100%; height: 100%;" /></div>
     
105. 
     
106. 
     
107. <div class="square" id="testImg"><img src="http://cccimg.com/view.php/d94681f1396a695d062d07cc20c243c5.jpg" style="width: 100%; height: 100%;" /></div>
     
108. 
     
109. 
     
110. <div class="square" id="testImg"><img src="http://cccimg.com/view.php/f40fa359f3624527b68d31faf17a0e6a.jpg" style="width: 100%; height: 100%;" /></div>
     
111. 
     
112. 
     
113. <div class="square" id="testImg"><img src="http://cccimg.com/view.php/a77e0f361db6d5556111b40f503fe45b.jpg" style="width: 100%; height: 100%;" /></div>
     
114. </div>
     
115. </div>
     
116. </div>
     
117. </div>
     
118. </div>
     
119. <p>
     
120. <audio autoplay="autoplay" loop="loop" src="https://music.163.com/song/media/outer/url?id=2615432337.MP3
     
121. "></audio><br><br><br>

复制代码

黑土恋

九品莲花 发表于 2026-4-16 11:52
老师，你把代码换一下，虽然背景图片不显，但帖子居中，您试一下。

谢谢！我已修改，你多教教我，音画我刚接触。

老知青自强不息

欣赏大姐精美制作！远握问候！遥祝春安！

北方雁

油菜花开遍地黄。好像都闻到了油菜花香。漂亮的音画作品。给老师点赞。

真真

黑土恋 发表于 2026-4-16 11:23
谢谢欣赏鼓励！由于老小孩与老网对代码的解析不同，所以在本网没能显示背景图片，我现在的能力还没学会解 ...

哦，还有背景图片，那更美哟。