学习代码音画《镁光灯老师硬笔书法展》

筱亭

太漂亮了！欣赏有加

老谟深虑

筱亭 发表于 2024-10-7 04:27
太漂亮了！欣赏有加

            谢谢老弟的美评，早上好！

老谟深虑

微尘 发表于 2024-10-6 19:16
老友，晚上好。精彩的作品点赞鼓励支持是完全应该的哦。

       再次感谢！上午好！

老钟

制作精美，点赞！

老谟深虑

老钟 发表于 2024-10-7 10:30
制作精美，点赞！

       谢谢鼓励！

筱亭

老谟深虑 发表于 2024-10-7 06:44
谢谢老弟的美评，早上好！

喜欢大哥的音画

镁光灯

太好了，谢谢老兄精心制作，收藏了。辛苦辛苦，感谢感谢！！！请把代码发给我。

老谟深虑

镁光灯 发表于 2024-10-7 11:13
太好了，谢谢老兄精心制作，收藏了。辛苦辛苦，感谢感谢！！！请把代码发给我。
...

        不用客气！

1. <div style="width: 1000px;height: 540px;box-shadow:  0px 0px 1px 2px #1b6f2b, 0px 0px 0px 8px #eefef1,0px 0px 5px 15px #1b6f2b;overflow:hidden;border-radius:1%;margin-top:20px;margin-LEFT: -0px;">
   
2. <style type="text/css">#papa{margin: 0px 0px ; width: 1000px; height:600px;background: lightgreen url('https://pic.imgdb.cn/item/66f14455f21886ccc0b6413a.jpg') no-repeat center/cover;  box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
   
3. #papa:hover #fullscreen { display:block ;}
   
4. #fullscreen { position: absolute; top:5%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em  华文隶书; opacity: 1; cursor: pointer; z-index: 11}
   
5. #pp { position: absolute; top: 75%;width: 100%; left:5px; z-index: 2;}
   
6. #mplayer{top: 85%;
   
7.         left: 85%;
   
8.         width: 50px;
   
9.         height: 50px;z-index: 40;
   
10.        background-color: red;
    
11.         position: absolute;
    
12.         transform: rotate(45deg);
    
13.                 animation: heartbeat .8s infinite alternate;
    
14.                 filter: drop-shadow(0px 0px 10px gray);
    
15.     }
    
16.     #mplayer::before,#mplayer::after{
    
17.         content: "";
    
18.         width: 50px;
    
19.         height: 50px;
    
20.         background-color: red;
    
21.         position: absolute;
    
22.         border-radius: 50%;
    
23.     }
    
24.     #mplayer::before{
    
25.         left: -30px;
    
26.     }
    
27.     #mplayer::after{
    
28.         top: -30px;
    
29.     }
    
30.        
    
31. @keyframes heartbeat { to { transform: rotate(45deg) scale(0.9); } }
    
32. 
    
33. .photo {width: 100%;
    
34.   height: 100%;
    
35.   position: absolute;z-index: -2;
    
36. top:0px; left:0px;filter:contrast(120%)brightness(100%);
    
37.   opacity: 0;-webkit-mask-image: radial-gra**nt(black 28% ,transparent 100%);
    
38. animation: round 90s linear infinite;
    
39. }
    
40. 
    
41. @keyframes round  {
    
42. 5% {
    
43. opacity: 0;
    
44. transform:translate(200%,0%)scale(1);}
    
45. 10% {
    
46. opacity: 1;
    
47. transform:translate(0%,0%)scale(1);}
    
48. 12% {
    
49. opacity: 1;
    
50. transform:translate(0%,0%)scale(1);}
    
51. 18% {
    
52. opacity: 0;
    
53. transform:translate(-200%,0%)scale(1);}
    
54. }
    
55. 
    
56. img:nth-child(1) {
    
57.   animation-delay: 84s;
    
58. }
    
59. img:nth-child(2) {
    
60.   animation-delay: 78s;
    
61. }
    
62. img:nth-child(3) {
    
63.   animation-delay: 72s;
    
64. }
    
65. img:nth-child(4) {
    
66.   animation-delay: 66s;
    
67. }
    
68. img:nth-child(5) {
    
69.   animation-delay: 60s;
    
70. }
    
71. img:nth-child(6) {
    
72.   animation-delay: 54s;
    
73. }
    
74. img:nth-child(7) {
    
75.   animation-delay: 48s;
    
76. }
    
77. img:nth-child(8) {
    
78.   animation-delay: 42s;
    
79. }
    
80. img:nth-child(9) {
    
81.   animation-delay: 36s;
    
82. }
    
83. img:nth-child(10) {
    
84.   animation-delay: 30s;
    
85. }
    
86. img:nth-child(11) {
    
87.   animation-delay: 24s;
    
88. }
    
89. img:nth-child(12) {
    
90.   animation-delay: 18s;
    
91. }
    
92. img:nth-child(13) {
    
93.   animation-delay: 12s;
    
94. }
    
95. img:nth-child(14) {
    
96.   animation-delay: 6s;
    
97. }
    
98. img:nth-child(15) {
    
99.   animation-delay: 0s;
    
100. }
     
101. 
     
102. 
     
103. .stop img:nth-child(1) {
     
104. animation-play-state: paused;
     
105. }
     
106. .stop img:nth-child(2)  {
     
107. animation-play-state: paused;
     
108. }
     
109. .stop  img:nth-child(3)  {
     
110. animation-play-state: paused;
     
111. }
     
112. .stop img:nth-child(4)  {
     
113. animation-play-state: paused;
     
114. }
     
115. .stop img:nth-child(5)  {
     
116. animation-play-state: paused;
     
117. }
     
118. .stop img:nth-child(6)  {
     
119. animation-play-state: paused;
     
120. }
     
121. .stop img:nth-child(7) {
     
122. animation-play-state: paused;
     
123. }
     
124. .stop img:nth-child(8) {
     
125. animation-play-state: paused;
     
126. }
     
127. 
     
128. .stop img:nth-child(9) {
     
129. animation-play-state: paused;
     
130. }
     
131. .stop img:nth-child(10) {
     
132. animation-play-state: paused;
     
133. }
     
134. 
     
135. .stop img:nth-child(11) {
     
136. animation-play-state: paused;
     
137. }
     
138. .stop img:nth-child(12) {
     
139. animation-play-state: paused;
     
140. }
     
141. .stop img:nth-child(13) {
     
142. animation-play-state: paused;
     
143. }
     
144. .stop img:nth-child(14) {
     
145. animation-play-state: paused;
     
146. }
     
147. 
     
148. @keyframes STAR-MOVE {
     
149.         from {
     
150.                 background-position: 0% -600%
     
151.         }
     
152.         to {
     
153.                 background-position: 600% 0%
     
154.         }
     
155. }
     
156. </style>
     
157. <div id="papa">
     
158. <div id="testImg"><img alt="" class="https://pic.imgdb.cn/item/66f14408f21886ccc0b5db73.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f14408f21886ccc0b5db8b.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f14408f21886ccc0b5db9f.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f14408f21886ccc0b5dbac.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f14408f21886ccc0b5dbc9.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f1442bf21886ccc0b60d8b.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f1442bf21886ccc0b60db9.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f1442bf21886ccc0b60df5.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f1442bf21886ccc0b60e09.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f1442bf21886ccc0b60e20.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f14448f21886ccc0b6322e.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f14448f21886ccc0b6323b.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f14448f21886ccc0b6325b.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f14448f21886ccc0b6326e.jpg" /> <img alt="" class="photo" src="https://pic.imgdb.cn/item/66f14448f21886ccc0b6327f.jpg" />
     
159. <div class="pat">&nbsp;</div>
     
160. </div>
     
161. </div>
     
162. </div>
     
163. </div>
     
164. 
     
165. <p>&nbsp;</p>
     
166. <div style="height:649px"></iframe></p>
     
167. </div>
     
168. </div><video autoplay="" controls="" height="0" src="https://cccimg.com/view.php/f33a1555c44df9eb313545e53817d401.mp3" width="0">
     
169. 
     

复制代码

童声韵灵

老谟深虑 发表于 2024-10-6 17:48
谢谢老友的欣赏和鼓励，晚上好！

友谊万岁！