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

九品莲花

九品莲花

代码如下：

<style type="text/css">
#ptall div        {
        width:750px;
        height:1177px;
        background-size:cover;
        transition:3s all;
}
#ptall div:nth-child(1)        {
        background-image:url("http://bbs.foz.cn/data/attachment/forum/201510/11/154829bh8t0hachy8jm05t.jpg");
}
#ptall div:nth-child(2)        {
        background-image:url("http://bbs.foz.cn/data/attachment/forum/201606/11/050506j37735ns9n53s00a.jpg");
}
#ptall div:nth-child(3)        {
        background-image:url("http://bbs.foz.cn/data/attachment/forum/201606/11/050906k51u33y5yw48w13u.jpg");
}
#ptall div:nth-child(4)        {
        background-image:url("http://bbs.foz.cn/data/attachment/forum/201606/11/051025njoas1xnj4ycuurm.jpg");
}
#ptall div:nth-child(5)        {
        background-image:url("http://bbs.foz.cn/data/attachment/forum/201606/11/051154l5xz7iiuzixxv9ex.jpg");
}
#ptall div:nth-child(6)        {
        background-image:url("http://bbs.foz.cn/data/attachment/forum/201606/11/051300jiyhgcg96yrsw29t.jpg");
}
#ptall div:nth-child(7)        {
        background-image:url("http://bbs.foz.cn/data/attachment/forum/201606/11/051433d2m5iis4118jum0o.jpg");
}
#ptall div:nth-child(8)        {
        background-image:url("http://bbs.foz.cn/data/attachment/forum/201606/11/051539hinviehh2skk5cn7.jpg");
}
#ptall div:nth-child(9)        {
        background-image:url("http://bbs.foz.cn/data/attachment/forum/201606/11/051712xjzhzd5oej3mj9h9.jpg");
}
#ptall div:nth-child(10)        {
        background-image:url("http://bbs.foz.cn/data/attachment/forum/201606/11/051830k7mvrrlrglxnggog.jpg");
}
#ptall div:nth-child(11)        {
        background-image:url("http://bbs.foz.cn/data/attachment/forum/201606/11/052006qj0gwpkqopfmzgp3.jpg");
}
#ptall div:nth-child(12)        {
        background-image:url("http://bbs.foz.cn/data/attachment/forum/201606/11/052110cmugxbofuz6ubbdv.jpg");
}


#ptall div:nth-child(1):hover        {
       
}


#ptall        {
        width:750px;
        height:9000px;
        animation: pshift 48s ease-out infinite alternate;
}
#ptall:hover        {
        animation-play-state:paused;
}


#outframe        {
        width:750px;
        height:1177px;
        overflow:hidden;
        border-radius:32px;
        margin:24px auto;
        position:relative;
        border:thick brown groove;
        ----webkit-mask-image: radial-gradient(black 60%, transparent 90%);
        background:#ccf;
}


@keyframes pshift {
        0%,9% {
                margin-top: 0px;
        }


        10%,17% {
                margin-top: -1177px;
        }


        18%,25% {
                margin-top: -2354px;
        }


        26%,33% {
                margin-top: -3531px;
        }


        34%,41% {
                margin-top: -4708px;
        }


        42%,47% {
                margin-top: -5885px;
        }


        50%,57% {
                margin-top: -7062px;
        }


        58%,65% {
                margin-top: -8239px;
        }
        66%,73% {
                margin-top: -9416px;
        }
        74%,81% {
                margin-top: -10593px;
        }
        82%,90% {
                margin-top: -11770px;
        }
        91%,100% {
                margin-top: -12947px;
        }
}


</style>


<div id="outframe">
<div id="ptall">
<div ></div><div ></div><div ></div><div ></div>
<div ></div><div ></div><div ></div><div ></div>
<div ></div><div ></div><div ></div><div ></div>
</div>


</div>
</td></tr></div><embed height="1" type="application/x-shockwave-flash" width="1" src="http://images.missyuan.com/attachments/day_091119/20091119_f2b0ddc619598f0131028u22v29PBSW3.swf" wmode="opaque" allowfullscreen="true" allowscriptaccess="always">

潇湘翁

问好莲花斑斑，欣赏音画佳作，遥祝天天快乐！

南国地带

试试代码（去掉音乐）

果亮

谢谢九品版分享，阿弥陀佛

娟子

欣赏莲花老师音画佳作，向您学习！问好！

林林五

欣赏佳作！赞！

廖若晨星

阿弥陀佛欣赏九品莲花老师音画佳作，

夕阳黄昏

夕阳黄昏

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>
     

复制代码

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