【习作】根据夕阳黄昏老师代码编制

夕阳黄昏

1. 
   
2. <style type="text/css">
   
3. #ptall img        {
   
4.         width:750px;
   
5.         height:1177px;
   
6.         background-size:cover;
   
7.         transition:3s all;
   
8. }
   
9. 
   
10. 
    
11. #ptall        {
    
12.         width:750px;
    
13.         height:9000px;
    
14.         animation: pshift 48s ease-out infinite alternate;
    
15. }
    
16. #ptall:hover        {
    
17.         animation-play-state:paused;
    
18. }
    
19. 
    
20. 
    
21. #outframe        {
    
22.         width:750px;
    
23.         height:1177px;
    
24.         overflow:hidden;
    
25.         border-radius:32px;
    
26.         margin:24px auto;
    
27.         position:relative;
    
28.         border:thick brown groove;
    
29.         ----webkit-mask-image: radial-gradient(black 60%, transparent 90%);
    
30.         background:#ccf;
    
31. }
    
32. 
    
33. 
    
34. @keyframes pshift {
    
35.         0%,9% {
    
36.                 margin-top: 0px;
    
37.         }
    
38. 
    
39. 
    
40.         10%,17% {
    
41.                 margin-top: -1177px;
    
42.         }
    
43. 
    
44. 
    
45.         18%,25% {
    
46.                 margin-top: -2354px;
    
47.         }
    
48. 
    
49. 
    
50.         26%,33% {
    
51.                 margin-top: -3531px;
    
52.         }
    
53. 
    
54. 
    
55.         34%,41% {
    
56.                 margin-top: -4708px;
    
57.         }
    
58. 
    
59. 
    
60.         42%,47% {
    
61.                 margin-top: -5885px;
    
62.         }
    
63. 
    
64. 
    
65.         50%,57% {
    
66.                 margin-top: -7062px;
    
67.         }
    
68. 
    
69. 
    
70.         58%,65% {
    
71.                 margin-top: -8239px;
    
72.         }
    
73.         66%,73% {
    
74.                 margin-top: -9416px;
    
75.         }
    
76.         74%,81% {
    
77.                 margin-top: -10593px;
    
78.         }
    
79.         82%,90% {
    
80.                 margin-top: -11770px;
    
81.         }
    
82.         91%,100% {
    
83.                 margin-top: -12947px;
    
84.         }
    
85. }
    
86. 
    
87. 
    
88. </style>
    
89. 
    
90. 
    
91. <div id="outframe">
    
92. <div id="ptall">
    
93. <img src="http://bbs.foz.cn/data/attachment/forum/201510/11/154829bh8t0hachy8jm05t.jpg">
    
94. <img src="http://bbs.foz.cn/data/attachment/forum/201606/11/050506j37735ns9n53s00a.jpg">
    
95. <img src="http://bbs.foz.cn/data/attachment/forum/201606/11/050906k51u33y5yw48w13u.jpg">
    
96. <img src="http://bbs.foz.cn/data/attachment/forum/201606/11/051025njoas1xnj4ycuurm.jpg">
    
97. <img src="http://bbs.foz.cn/data/attachment/forum/201606/11/051154l5xz7iiuzixxv9ex.jpg">
    
98. <img src="http://bbs.foz.cn/data/attachment/forum/201606/11/051300jiyhgcg96yrsw29t.jpg">
    
99. <img src="http://bbs.foz.cn/data/attachment/forum/201606/11/051433d2m5iis4118jum0o.jpg">
    
100. <img src="http://bbs.foz.cn/data/attachment/forum/201606/11/051539hinviehh2skk5cn7.jpg">
     
101. <img src="http://bbs.foz.cn/data/attachment/forum/201606/11/051712xjzhzd5oej3mj9h9.jpg">
     
102. <img src="http://bbs.foz.cn/data/attachment/forum/201606/11/051830k7mvrrlrglxnggog.jpg">
     
103. <img src="http://bbs.foz.cn/data/attachment/forum/201606/11/052006qj0gwpkqopfmzgp3.jpg">
     
104. <img src="http://bbs.foz.cn/data/attachment/forum/201606/11/052110cmugxbofuz6ubbdv.jpg">
     
105. 
     
106. </div>
     
107. 
     
108. </div>
     

复制代码

代码可以简化一些，不必太复杂。

许森匡.

欣赏音画佳作！

山水人家

        向老友学习，不断努力，不断创新，欣赏您的佳作，晚上好。

沉醉醉

九品莲花 发表于 2020-12-5 08:38
代码如下：

欣赏莲花老师精彩制作，请教怎么做的，我很想学习。

真真

相互学习，这里真美好。

瑢芳田智

欣赏莲花老师精彩的音画制作，学习老师不断创新的精神！

九品莲花

潇湘翁 发表于 2020-12-5 08:46
问好莲花斑斑，欣赏音画佳作，遥祝天天快乐！

老友早晨好！
非常感谢您的支持！

九品莲花

南国地带 发表于 2020-12-5 09:45
本帖最后由 南国地带 于 2020-12-5 11:06 编辑 试试代码（去掉音乐）

南国地带早晨好！
非常感谢您的支持！

九品莲花

果亮 发表于 2020-12-5 09:46
谢谢九品版分享，阿弥陀佛

老友早晨好！
非常感谢您的支持！

九品莲花

娟子 发表于 2020-12-5 09:52
欣赏莲花老师音画佳作，向您学习！问好！

娟子早晨好！
非常感谢您的支持！