為什么效果出不來呢？哪里的問題，有沒有人可以解答一下
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style>
? ? ? ? body {
? ? ? ? ? ? margin-top: 5em;
? ? ? ? ? ? text-align: center;
? ? ? ? ?color: #414142;
? ? ? ? ?background: rgb(246,241,232);
? ? ? ? 任務(wù)一、制作多背景
? ? ? ? ?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");
? ? ? ? 任務(wù)二、控制背景圖像尺寸
? ? ? ? ?background-size:cover;
? ? ? ? }
? ? ? ??
? ? ? ? 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ù)三、給每個列表項添加過渡動畫效果
? ? ? ? ? ? -webkit-transition: -webkit-transform .6s;
? ? ? ? }
? ? ? ??
? ? ? ? .item:hover {
? ? ? ? 任務(wù)四、懸浮狀態(tài)改變每個列表項的transform效果
? ? ? ? ?-webkit-transform:translateZ(-50px) rotateX(90deg);
? ? ? ? }
? ? ? ??
? ? ? ? .item img {
? ? ? ? ? ? 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;
? ? ? ? ? ?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è)置漸變效果
? ? ? ? ?background:linear-gradient(to bottom,#fff,#3ef);
? ? ? ? ? ? -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)時，去掉圖片的陰影效果
? ? ? ? ? ? ?-webkit-box-shadow:none;
? ? ? ? ? ? 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>
? ? ? ? ?<div>
? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1e900001db6d04630253.png" />
? ? ? ? ? ? ?<span>
? ? ? ? ? ? ?<strong>澳門風(fēng)云</strong>聞名中外，曾擔(dān)任美國賭場保安總顧問的魔術(shù)手石一堅，終回流澳門退休，更宴請各方朋友到來慶祝生日宴.
? ? ? ? ? ? ?</span>
? ? ? ? ?</div>
? ? ?</div>
? ? ?
? ? ?<div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1eb20001ed6a03360201.png" />
? ? ? ? ? ? ?<span>
? ? ? ? ? ? ?<strong>改過遷善</strong>該劇講述了金明民飾演的律師在失憶后回顧自己以往的所作所為心生懺悔，為彌補自己犯下的錯誤而與自己曾經(jīng)工作過的律師事務(wù)所對簿公堂的故事。
? ? ? ? ? ? ?</span>
? ? ? ? ?</div>
? ? ?</div>
? ? ?
? ? ?<div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1eef0001c62903830217.png" />
? ? ? ? ? ? ?<span>
? ? ? ? ? ? ?<strong>父子刑警</strong>本劇改編自雫井修介小說《Bitter Blood》。劇中，新晉刑警?佐原夏輝（佐藤健飾）被分配到銀座警察
? ? ? ? ? ? ?</span>
? ? ? ? ?</div>
? ? ?</div>
? ? ?
? ? ?<div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1f4e0001f90c02850210.png" />
? ? ? ? ? ? ?<span>
? ? ? ? ? ? ?<strong>果寶特攻3</strong>果寶特攻3,顧名思義是果寶特攻的第二部續(xù)集,已在國家廣播電影電視總局備案.暫定劇情為:菠蘿吹雪偶然間穿越到了古代的水果世界
? ? ? ? ? ? ?</span>
? ? ? ? ?</div>
? ? ?</div>
? ? ?<div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1f5500017d5603190214.png" />
? ? ? ? ? ? ?<span>
? ? ? ? ? ? ?<strong>紅眼</strong>1988年7月16日，從漢城始發(fā)的列車發(fā)生了一起嚴(yán)重的交通事故，造成100多人死亡。
? ? ? ? ? ? ?</span>
? ? ? ? ?</div>
? ? ?</div>
? ? ?<div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1f620001874503500209.png" />
? ? ? ? ? ? ?<span>
? ? ? ? ? ? ?<strong>熊出沒之奪寶熊兵</strong>一場漆黑雨夜的意外事故，一段笑料十足的誤打誤撞，將兩個外表相似卻內(nèi)容各異的箱子調(diào)換。
? ? ? ? ? ? ?</span>
? ? ? ? ?</div>
? ? ?</div>
</div>
</body>
</html>
2022-03-26
你機智啥了？說明白看看？嗯，我是大一的，剛學(xué)習(xí)js
2015-10-26
你的注釋沒有標(biāo)注起來 會有問題的
2015-10-25
終于查出來了，要把文字用/* ?*/括起來。