【众志成城】【安夏若鱼组】夏鱼红色纸飞机代码图组合

晴天小鱼

晴天小鱼

1. <style>
   
2. #papa { left: -0px; width: 800px; height: 800px; background:  url(' ') no-repeat center/cover; box-shadow: 0px 0px 0px #fff; box-shadow:  0px 0px 0px #fff;; display: flex; justify-content: center; overflow: hidden; position: relative; z-index: 1; }
   
3. .wenzi { position: absolute; top: 0px; left:100px; z-index: 10; }
   
4. .text {animation: stroke 5s infinite alternate;letter-spacing: 10px;font-size: 80px;}
   
5. @keyframes stroke {
   
6. 0% {fill: rgba(72, 138, 20, 0);stroke: #f44336;stroke-dashoffset: 25%;stroke-dasharray: 0 50%;stroke-width: 1;}
   
7. 70% {fill: rgba(72, 138, 20, 0);stroke:#f44336;stroke-width: 3;}
   
8. 90%,100% {fill: #f44336 ;stroke: rgba(96, 126, 108, 0);stroke-dashoffset: -25%;stroke-dasharray: 50% 0;stroke-width: 0;}}
   
9. </style>
   
10. 
    
11. 
    
12. 
    
13. <div id="papa">
    
14. <div class="wenzi text"><svg width="600" height="200"><g><text x="10" y="80" font-family="华文隶书"> 【安夏若鱼组】</text></g></svg></div>
    
15. <div style="width: 800px; height: 800px; margin-top:350px; margin-left:0px; text-align: center;">
    
16. <img class="photo" src="https://img.wyc520.com.cn/data/attachment/forum/202210/03/084337gl83tzdmf1dal3ax.jpg" alt="">
    
17. <img class="photo" src="https://img.wyc520.com.cn/data/attachment/forum/202210/03/084542widrrqzihvypbyhi.jpg" alt="">
    
18. <img class="photo" src="https://img.wyc520.com.cn/data/attachment/forum/202210/03/084752kolb87plda8b4bko.jpg" alt="">
    
19. <img class="photo" src="https://img.wyc520.com.cn/data/attachment/forum/202210/03/084337gl83tzdmf1dal3ax.jpg" alt="">
    
20. <img class="photo" src="https://img.wyc520.com.cn/data/attachment/forum/202210/03/084542widrrqzihvypbyhi.jpg" alt="">
    
21. <img class="photo" src="https://img.wyc520.com.cn/data/attachment/forum/202210/03/084752kolb87plda8b4bko.jpg" alt="">
    
22. 
    
23. </div>
    
24. </div>
    
25. 
    
26. 
    
27. <style type="text/css">
    
28. .photo {width: 800px;
    
29.   height: 800px;
    
30.   position: absolute;top:0px; left:0px;
    
31. filter:contrast(130%)brightness(100%);
    
32.   animation: round 48s infinite;
    
33.   opacity: 0;}
    
34. @keyframes round {1% {
    
35. opacity: 0;
    
36. transform:translate(0%,0%)scale(1);}
    
37. 5% {
    
38. opacity: 1;
    
39. transform:translate(0%,0%)scale(1);}
    
40. 14% {
    
41. opacity: 1;
    
42. transform:translate(0%,0%)scale(1);}
    
43. 16% {
    
44. opacity: 1;
    
45. transform:translate(0%,0%)scale(1);}
    
46. 24% {
    
47. opacity: 0;
    
48. transform:translate(0%,0%)scale(1);}
    
49. }
    
50. img:nth-child(8) {animation-delay: 42s;}
    
51. img:nth-child(7) {animation-delay: 36s;}
    
52. img:nth-child(6) {animation-delay: 30s;}
    
53. img:nth-child(5) {animation-delay: 24s;}
    
54. img:nth-child(4) {animation-delay: 18s;}
    
55. img:nth-child(3) {animation-delay: 12s;}
    
56. img:nth-child(2) {animation-delay: 6s;}
    
57. </style >
    

复制代码

宇泽长安

真漂亮啊！强强联合！

这用了夏天的梦的手工图片制作的音画，这是和夏天的梦合作的帖子，前面加上【众志成城】十自拟题目，就0k

晴天小鱼

宇泽长安 发表于 2022-10-4 14:05
真漂亮啊！强强联合！

这用了夏天的梦的手工图片制作的音画，这是和夏天的梦合作的帖子，前面加上【众志 ...

好的，再看看对不对

宇泽长安

赶紧发音画版吧，我这小组长看到你们这么有才，好骄傲！

宇泽长安

晴天小鱼 发表于 2022-10-4 14:06
好的，再看看对不对

对，很好了

夏天的梦

漂亮，做成代码了

阙歌

动态特效，欣赏点赞！

跑调天后

强强联手。

青杞

强强联手，真是好看