任务一、制作多背景
提示：上层有一个径向渐变，渐变图像farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%)，底层使用背景图片。
任务二、控制背景图像尺寸
提示：使用background-size，让两层背景都是全屏显示
任务三、给每个列表项添加过渡动画效果
提示：使用transition属性，给每个列表项.item设置变形过渡效果。transition: -webkit-transform .6s;
任务四、悬浮状态改变每个列表项的transform效果
提示：通过transform属性，在列表悬浮状态设置 3D旋转效果：translateZ(-50px) rotateX(95deg);
任务五、设置列表项图片的圆角和阴影效果
提示：通过border-radius和box-shadow给图像设置圆角和阴影效果。
任务六、给底层显示文本的层级设置渐变效果
提示：使用CSS3渐变属性设置选项卡文本层的背景效果
任务七、列表项悬浮状态时，去掉图片的阴影效果
提示：通过box-shadow去掉图片阴影效果
效果图：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 body {
8 margin-top: 5em;
9 text-align: center;
10 color: #414142;
11 background: rgb(246,241,232);
12 /*任务一、制作多背景*/
13 background-image: -ms-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
14 background-image: -webkit-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
15 background-image: radial-gradient( farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
16 /*任务二、控制背景图像尺寸*/
17 background-size: cover;
18 }
19
20 h1, em, #information {
21 display: block;
22 font-size: 25px;
23 font-weight: normal;
24 margin: 2em auto;
25 }
26
27 a {
28 color: #414142;
29 font-style: normal;
30 text-decoration: none;
31 font-size: 20px;
32 }
33
34 a:hover {
35 text-decoration: underline;
36 }
37
38 #container {
39 margin: 0 auto;
40 width: 1024px;
41 }
42
43 .wrapper {
44 display: inline-block;
45 width: 310px;
46 height: 100px;
47 vertical-align: top;
48 margin: 1em 1.5em 2em 0;
49 cursor: pointer;
50 position: relative;
51 font-family: Tahoma, Arial;
52 -webkit-perspective: 4000px;
53 -moz-perspective: 4000px;
54 -ms-perspective: 4000px;
55 -o-perspective: 4000px;
56 perspective: 4000px;
57 }
58
59 .item {
60 height: 100px;
61 -webkit-transform-style: preserve-3d;
62 -moz-transform-style: preserve-3d;
63 -ms-transform-style: preserve-3d;
64 -o-transform-style: preserve-3d;
65 transform-style: preserve-3d;
66 /*任务三、给每个列表项添加过渡动画效果*/
67
68 -webkit-transition: -webkit-transform .6s;
69 -moz-transition: -moz-transform .6s;
70 -ms-transition: -ms-transform .6s;
71 -o-transition: -o-transform .6s;
72 transition: transform .6s;
73 }
74
75 .item:hover {
76 /*任务四、悬浮状态改变每个列表项的transform效果*/
77
78 -webkit-transform: translateZ(-50px) rotateX(95deg);
79 -moz-transform: translateZ(-50px) rotateX(95deg);
80 -ms-transform: translateZ(-50px) rotateX(95deg);
81 -o-transform: translateZ(-50px) rotateX(95deg);
82 transform: translateZ(-50px) rotateX(95deg);
83 }
84
85 .itemimg {
86 display: block;
87 position: absolute;
88 top: 0;
89 /*任务五、设置列表项图片的圆角和阴影效果*/
90 border-radius: 3px;
91 box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
92
93 -webkit-transform: translateZ(50px);
94 -moz-transform: translateZ(50px);
95 -ms-transform: translateZ(50px);
96 -o-transform: translateZ(50px);
97 transform: translateZ(50px);
98 -webkit-transition: all .6s;
99 -moz-transition: all .6s;
100 -ms-transition: all .6s;
101 -o-transition: all .6s;
102 transition: all .6s;
103 width: 310px;
104 height: 100px;
105 }
106
107 .item .information {
108 display: block;
109 position: absolute;
110 top: 0;
111 height: 80px;
112 width: 290px;
113 text-align: left;
114 border-radius: 15px;
115 padding: 10px;
116 font-size: 12px;
117 text-shadow: 1px 1px1pxrgba(255,255,255,0.5);
118 box-shadow: none;
119 background: rgb(236,241,244);
120 /*任务六、给底层显示文本的层级设置渐变效果*/
121
122 background: -webkit-linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
123 background: -ms-linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
124 background: linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
125
126 -webkit-transform: rotateX(-90deg) translateZ(50px);
127 -moz-transform: rotateX(-90deg) translateZ(50px);
128 -ms-transform: rotateX(-90deg) translateZ(50px);
129 -o-transform: rotateX(-90deg) translateZ(50px);
130 transform: rotateX(-90deg) translateZ(50px);
131 -webkit-transition: all .6s;
132 -moz-transition: all .6s;
133 -ms-transition: all .6s;
134 -o-transition: all .6s;
135 transition: all .6s;
136 }
137
138 .information strong {
139 display: block;
140 margin: .2em 0 .5em 0;
141 font-size: 20px;
142 font-family: "Oleo Script";
143 }
144 .item:hoverimg {
145 /*任务七、列表项悬浮状态时，去掉图片的阴影效果*/
146
147 box-shadow: none;
148 border-radius: 15px;
149 }
150
151 .item:hover .information {
152 box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
153 border-radius: 3px;
154 }
155 </style>
156 </head>
157 <body>
158 <div id="container">
159 <h1>CSS3 3D变形制作视频展示区</h1>
160
161 <div class="wrapper">
162 <div class="item">
163 <img src="http://pic2.qiyipic.com/image/20140415/4e/32/5f/v_105669963_m_601_180_101.jpg" />
164 <span class="information">
165 <strong>澳门风云</strong>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.
166 </span>
167 </div>
168 </div>
169
170 <div class="wrapper">
171 <div class="item">
172 <img src="http://pic4.qiyipic.com/image/20140417/b5/01/81/a_100003950_m_601_m2_180_101.jpg" />
173 <span class="information">
174 <strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
175 </span>
176 </div>
177 </div>
178
179 <div class="wrapper">
180 <div class="item">
181 <img src="http://pic1.qiyipic.com/common/lego/20140521/4515581d06cc4d5b8ab320da2cf3778d.jpg" />
182 <span class="information">
183 <strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警?佐原夏辉（佐藤健饰）被分配到银座警察
184 </span>
185 </div>
186 </div>
187
188 <div class="wrapper">
189 <div class="item">
190 <img src="http://pic5.qiyipic.com/image/20140319/7a/8d/4f/a_100003478_m_601_m1_180_101.jpg" />
191 <span class="information">
192 <strong>果宝特攻3</strong>果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
193 </span>
194 </div>
195 </div>
196 <div class="wrapper">
197 <div class="item">
198 <img src="http://pic0.qiyipic.com/image/20140517/ce/e8/42/v_106167752_m_601_180_101.jpg" />
199 <span class="information">
200 <strong>红眼</strong>1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。
201 </span>
202 </div>
203 </div>
204 <div class="wrapper">
205 <div class="item">
206 <img src="http://pic6.qiyipic.com/image/20140303/da/e9/aa/v_105073913_m_601_180_101.jpg" />
207 <span class="information">
208 <strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。
209 </span>
210 </div>
211 </div>
212 </div>
213 </body>
214 </html>
时间： 2024-10-10 14:59:58