CSS3 视差滚动相册

一个基于 CSS3 的视差滚动相册，采用网格布局（重要）与弹性布局。

     视差滚动相册
  
源代码如下：

1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5.   <meta charset="UTF-8">
6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.   <title>旋转视差相册</title>
8.   <style>
9.     * {
10.       margin: 0;
11.       padding: 0;
12.     }
14.     .content {
15.       width: 300px;
16.       height: 300px;
17.       margin: 0 auto;
18.       margin-top: 100px;
19.       display: grid;
20.       /* 列 * 3，每列占 1/3，repeat的添加与否效果一致 */
21.       /* grid-template-columns: repeat(3, 1fr);
22.       grid-template-rows: (3, 1fr); */
24.       /* grid-template 会覆盖前面的 grid-template-columns & grid-template-rows */
25.       grid-template:
26.         "A A B"
27.         "C D B"
28.         "C E E";
29.       grid-gap: 10px;
30.       padding: 10px;
31.       border: 5px solid transparent;
32.       border-image: linear-gradient(45deg, #df270ae0, #dc8d30, #deeb44, #01eb3e, #138fe9, #7127ee) 1;
33.       animation: rotation 15s infinite linear;
34.     }
36.     .item {
37.       overflow: hidden;
38.       border: 1px solid #000;
39.       display: flex;
40.       align-items: center;
41.       justify-content: center;
42.     }
44.     .item img {
45.       animation: rotation1 15s infinite linear;
46.       width: 300%;
47.       height: 300%;
48.       object-fit: cover;
49.     }
51.     .item:nth-child(1) {
52.       grid-area: A;
53.     }
55.     .item:nth-child(2) {
56.       grid-area: B;
57.     }
59.     .item:nth-child(3) {
60.       grid-area: C;
61.     }
63.     .item:nth-child(4) {
64.       grid-area: D;
65.     }
67.     .item:nth-child(5) {
68.       grid-area: E;
69.     }
71.     @keyframes rotation {
72.       to {
73.         transform: rotate(360deg);
74.       }
75.     }
77.     @keyframes rotation1 {
78.       to {
79.         transform: rotate(-360deg);
80.       }
81.     }
82.   </style>
83. </head>
85. <body>
86.   <div class="content">
87.     <div class="item">
88.       <img src="./static/pic1.jpg">
89.     </div>
90.     <div class="item">
91.       <img src="./static/pic2.jpg">
92.     </div>
93.     <div class="item">
94.       <img src="./static/pic3.jpg">
95.     </div>
96.     <div class="item">
97.       <img src="./static/pic4.jpg">
98.     </div>
99.     <div class="item">
100.       <img src="./static/pic5.jpg">
101.     </div>
102.   </div>
103. </body>
105. </html>

复制代码