中国麻豆日老太,久久久精品456亚洲影院

第11章 Media Queries 與Responsive 設(shè)計(jì)
編程：11-1 Media...
編程：11-2 media...
編程：11-3 Media Queries使用方法
編程：11-4 Responsive設(shè)計(jì)（一）
編程：11-5 Responsive設(shè)計(jì)（二）
編程：11-6 Responsive布局技巧
編程：11-7 Responsive設(shè)計(jì)——m...
編程：11-8 Responsive設(shè)計(jì)——不...

制作3D旋轉(zhuǎn)視頻展示區(qū)

根據(jù)前面所學(xué)，制作下圖效果

案例在線展示地址：http://codepen.io/airen/pen/eAztg

任務(wù)

任務(wù)一、制作多背景

提示：上層有一個(gè)徑向漸變，漸變圖像farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%)，底層使用背景圖片：http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg

任務(wù)二、控制背景圖像尺寸

提示：使用background-size，讓兩層背景都是全屏顯示

任務(wù)三、給每個(gè)列表項(xiàng)添加過渡動(dòng)畫效果

提示：使用transition屬性，給每個(gè)列表項(xiàng).item設(shè)置變形過渡效果。transition: -webkit-transform .6s;

任務(wù)四、懸浮狀態(tài)改變每個(gè)列表項(xiàng)的transform效果

提示：通過transform屬性，在列表懸浮狀態(tài)設(shè)置 3D旋轉(zhuǎn)效果：translateZ(-50px) rotateX(95deg);

任務(wù)五、設(shè)置列表項(xiàng)圖片的圓角和陰影效果

提示：通過border-radius和box-shadow給圖像設(shè)置圓角和陰影效果。

任務(wù)六、給底層顯示文本的層級(jí)設(shè)置漸變效果

提示：使用CSS3漸變屬性設(shè)置選項(xiàng)卡文本層的背景效果

任務(wù)七、列表項(xiàng)懸浮狀態(tài)時(shí)，去掉圖片的陰影效果

提示：通過box-shadow去掉圖片陰影效果

?不會(huì)了怎么辦

||

index.html

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin-top: 5em; text-align: center; color: #414142; background: rgb(246,241,232); 任務(wù)一、制作多背景任務(wù)二、控制背景圖像尺寸 } h1, em, #information { display: block; font-size: 25px; font-weight: normal; margin: 2em auto; } a { color: #414142; font-style: normal; text-decoration: none; font-size: 20px; } a:hover { text-decoration: underline; } #container { margin: 0 auto; width: 1024px; } .wrapper { display: inline-block; width: 310px; height: 100px; vertical-align: top; margin: 1em 1.5em 2em 0; cursor: pointer; position: relative; font-family: Tahoma, Arial; -webkit-perspective: 4000px; -moz-perspective: 4000px; -ms-perspective: 4000px; -o-perspective: 4000px; perspective: 4000px; } .item { height: 100px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; 任務(wù)三、給每個(gè)列表項(xiàng)添加過渡動(dòng)畫效果 } .item:hover { 任務(wù)四、懸浮狀態(tài)改變每個(gè)列表項(xiàng)的transform效果 } .itemimg { display: block; position: absolute; top: 0; 任務(wù)五、設(shè)置列表項(xiàng)圖片的圓角和陰影效果 -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); -ms-transform: translateZ(50px); -o-transform: translateZ(50px); transform: translateZ(50px); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; width: 310px; height: 100px; } .item .information { display: block; position: absolute; top: 0; height: 80px; width: 290px; text-align: left; border-radius: 15px; padding: 10px; font-size: 12px; text-shadow: 1px 1px1px rgba(255,255,255,0.5); box-shadow: none; background: rgb(236,241,244); 任務(wù)六、給底層顯示文本的層級(jí)設(shè)置漸變效果 -webkit-transform: rotateX(-90deg) translateZ(50px); -moz-transform: rotateX(-90deg) translateZ(50px); -ms-transform: rotateX(-90deg) translateZ(50px); -o-transform: rotateX(-90deg) translateZ(50px); transform: rotateX(-90deg) translateZ(50px); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; } .information strong { display: block; margin: .2em 0 .5em 0; font-size: 20px; font-family: "Oleo Script"; } .item:hover img { 任務(wù)七、列表項(xiàng)懸浮狀態(tài)時(shí)，去掉圖片的陰影效果 border-radius: 15px; } .item:hover .information { box-shadow: 0px 3px 8px rgba(0,0,0,0.3); border-radius: 3px; } </style> </head> <body> <div id="container"> <h1>CSS3 3D變形制作視頻展示區(qū)</h1> <div class="wrapper"> <div class="item"> <img src="http://img1.sycdn.imooc.com//545b1e900001db6d04630253.png" /> <span class="information"> <strong>澳門風(fēng)云</strong>聞名中外，曾擔(dān)任美國(guó)賭場(chǎng)保安總顧問的魔術(shù)手石一堅(jiān)，終回流澳門退休，更宴請(qǐng)各方朋友到來慶祝生日宴. </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="http://img1.sycdn.imooc.com//545b1eb20001ed6a03360201.png" /> <span class="information"> <strong>改過遷善</strong>該劇講述了金明民飾演的律師在失憶后回顧自己以往的所作所為心生懺悔，為彌補(bǔ)自己犯下的錯(cuò)誤而與自己曾經(jīng)工作過的律師事務(wù)所對(duì)簿公堂的故事。 </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="http://img1.sycdn.imooc.com//545b1eef0001c62903830217.png" /> <span class="information"> <strong>父子刑警</strong>本劇改編自雫井修介小說《Bitter Blood》。劇中，新晉刑警•佐原夏輝（佐藤健飾）被分配到銀座警察 </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="http://img1.sycdn.imooc.com//545b1f4e0001f90c02850210.png" /> <span class="information"> <strong>果寶特攻3</strong>果寶特攻3,顧名思義是果寶特攻的第二部續(xù)集,已在國(guó)家廣播電影電視總局備案.暫定劇情為:菠蘿吹雪偶然間穿越到了古代的水果世界 </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="http://img1.sycdn.imooc.com//545b1f5500017d5603190214.png" /> <span class="information"> <strong>紅眼</strong>1988年7月16日，從漢城始發(fā)的列車發(fā)生了一起嚴(yán)重的交通事故，造成100多人死亡。 </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="http://img1.sycdn.imooc.com//545b1f620001874503500209.png" /> <span class="information"> <strong>熊出沒之奪寶熊兵</strong>一場(chǎng)漆黑雨夜的意外事故，一段笑料十足的誤打誤撞，將兩個(gè)外表相似卻內(nèi)容各異的箱子調(diào)換。 </span> </div> </div> </div> </body> </html>

提問題

提交

其他問答

查看更多本節(jié)問答

寫筆記

公開筆記

提交

||

全屏

請(qǐng)驗(yàn)證，完成請(qǐng)求

由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求

打開微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號(hào)

綁定后可得到

· 粉絲專屬優(yōu)惠福利
· 大咖直播交流干貨
· 課程更新,問題答復(fù)提醒
· 賬號(hào)支付安全提醒

使用 Ctrl+D 可將網(wǎng)站添加到書簽

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

12-4 制作3D旋轉(zhuǎn)視頻展示區(qū)

制作3D旋轉(zhuǎn)視頻展示區(qū)

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

12-4 制作3D旋轉(zhuǎn)視頻展示區(qū)

熱搜

最近搜索清空

制作3D旋轉(zhuǎn)視頻展示區(qū)

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～