制服无码一区二区三区,亚洲伊人香蕉网做爱视频

制作3D旋轉視頻展示區

根據前面所學，制作下圖效果

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

任務

任務一、制作多背景

提示：上層有一個徑向漸變，漸變圖像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

任務二、控制背景圖像尺寸

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

任務三、給每個列表項添加過渡動畫效果

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

任務四、懸浮狀態改變每個列表項的transform效果

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

任務五、設置列表項圖片的圓角和陰影效果

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

任務六、給底層顯示文本的層級設置漸變效果

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

任務七、列表項懸浮狀態時，去掉圖片的陰影效果

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

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

12-4 制作3D旋轉視頻展示區

制作3D旋轉視頻展示區

任務

提問題

其他問答

寫筆記

您還未綁定服務號

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

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

12-4 制作3D旋轉視頻展示區

熱搜

最近搜索清空

制作3D旋轉視頻展示區

任務

提問題

其他問答

寫筆記

您還未綁定服務號

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

手記推薦

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