最近中文字幕mv免费看,在线观看一区二区三区av,在线成人a毛片免费播放

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

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

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

任務(wù)

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

提示：上層有一個徑向漸變，漸變圖像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ù)三、給每個列表項添加過渡動畫效果

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

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

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

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

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

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

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

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

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

?不會了怎么辦

||

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ù)三、給每個列表項添加過渡動畫效果 } .item:hover { 任務(wù)四、懸浮狀態(tài)改變每個列表項的transform效果 } .itemimg { display: block; position: absolute; top: 0; 任務(wù)五、設(shè)置列表項圖片的圓角和陰影效果 -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ù)六、給底層顯示文本的層級設(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ù)七、列表項懸浮狀態(tài)時，去掉圖片的陰影效果 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>澳門風云</strong>聞名中外，曾擔任美國賭場保安總顧問的魔術(shù)手石一堅，終回流澳門退休，更宴請各方朋友到來慶祝生日宴. </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="http://img1.sycdn.imooc.com//545b1eb20001ed6a03360201.png" /> <span class="information"> <strong>改過遷善</strong>該劇講述了金明民飾演的律師在失憶后回顧自己以往的所作所為心生懺悔，為彌補自己犯下的錯誤而與自己曾經(jīng)工作過的律師事務(wù)所對簿公堂的故事。 </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ù)集,已在國家廣播電影電視總局備案.暫定劇情為:菠蘿吹雪偶然間穿越到了古代的水果世界 </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ā)生了一起嚴重的交通事故，造成100多人死亡。 </span> </div> </div> <div class="wrapper"> <div class="item"> <img src="http://img1.sycdn.imooc.com//545b1f620001874503500209.png" /> <span class="information"> <strong>熊出沒之奪寶熊兵</strong>一場漆黑雨夜的意外事故，一段笑料十足的誤打誤撞，將兩個外表相似卻內(nèi)容各異的箱子調(diào)換。 </span> </div> </div> </div> </body> </html>

提問題

提交

其他問答

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

寫筆記

公開筆記

提交

||

全屏

請驗證，完成請求

由于請求次數(shù)過多，請先驗證，完成再次請求

打開微信掃碼自動綁定

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

綁定后可得到

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

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

最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

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

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

任務(wù)

提問題

其他問答

寫筆記

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

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

手記推薦

最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

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

熱搜

最近搜索清空

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

任務(wù)

提問題

其他問答

寫筆記

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

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

手記推薦

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