                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /十天精通CSS3

代碼出現(xiàn)bug了嗎?

<!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");

? ? ? ? ? ? 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");

? ? ? ? ? ? background-image: -moz-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");

? ? ? ? ? ? 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");

? ? ? ? ? ? background-image: -o-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; ? ? /* 這里為什么是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ù)三、給每個(gè)列表項(xiàng)添加過(guò)渡動(dòng)畫(huà)效果 */

? ? ? ? ?transition: transform .6s;

? ? ? ? ? ? transition: -webkit-transform .6s;

? ? ? ? ? ? transition: -moz-transform .6s;

? ? ? ? ? ? transition: -ms-transform .6s;

? ? ? ? ? ? transition: -o-transform .6s;

? ? ? ? }

? ? ? ??

? ? ? ? .item:hover {

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

? ? ? ? ? ? transform: translateZ(-50px) rotateX(95deg);

? ? ? ? ? ? -webkit-transform: translateZ(-50px) rotateX(95deg);

? ? ? ? ? ? -moz-transform: translateZ(-50px) rotateX(95deg);

? ? ? ? ? ? -ms-transform: translateZ(-50px) rotateX(95deg);

? ? ? ? ? ? -o-transform: translateZ(-50px) rotateX(95deg);

? ? ? ? }

? ? ? ??

? ? ? ? .item img {

? ? ? ? ? ? display: block;

? ? ? ? ? ? position: absolute;

? ? ? ? ? ? top: 0;

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

? ? ? ? ? ? border-radius: 3px;

? ? ? ? ? ? box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);

? ? ? ??

? ? ? ? -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è)置漸變效果 */

? ? ? ? ? ?background: linear-gradient(to bottom, rgba(236, 241, 244, 1) 0%, rgba(190, 202, 217, 1) 100%);

? ? ? ? ? ?background: -webkit-linear-gradient(to bottom, rgba(236, 241, 244, 1) 0%, rgba(190, 202, 217, 1) 100%);

? ? ? ? ? ?background: -moz-linear-gradient(to bottom, rgba(236, 241, 244, 1) 0%, rgba(190, 202, 217, 1) 100%);

? ? ? ? ? ?background: -ms-linear-gradient(to bottom, rgba(236, 241, 244, 1) 0%, rgba(190, 202, 217, 1) 100%);

? ? ? ? ? ?background: -o-linear-gradient(to bottom, rgba(236, 241, 244, 1) 0%, rgba(190, 202, 217, 1) 100%);

? ? ? ??

? ? ? ? ? ? -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;

? ? ? ? ? ? box-shadow: none;

? ? ? ? }

? ? ? ??

? ? ? ? .item:hover .information {

? ? ? ? ? ? box-shadow: 0px 3px 8px rgba(0,0,0,0.3);

? ? ? ? ? ? border-radius: 3px;

? ? ? ? ?}

</style>

</head>

<body>

? ? ?<h1>CSS3 3D變形制作視頻展示區(qū)</h1>

? ? ?<div>

? ? ? ? ?<div>

? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1e900001db6d04630253.png" />

? ? ? ? ? ? ?<span>

? ? ? ? ? ? ?<strong>澳門(mén)風(fēng)云</strong>聞名中外，曾擔(dān)任美國(guó)賭場(chǎng)保安總顧問(wèn)的魔術(shù)手石一堅(jiān)，終回流澳門(mén)退休，更宴請(qǐng)各方朋友到來(lái)慶祝生日宴.

? ? ? ? ? ? ?</span>

? ? ? ? ?</div>

? ? ?</div>

? ? ?

? ? ?<div>

? ? ? ? ?<div>

? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1eb20001ed6a03360201.png" />

? ? ? ? ? ? ?<span>

? ? ? ? ? ? ?<strong>改過(guò)遷善</strong>該劇講述了金明民飾演的律師在失憶后回顧自己以往的所作所為心生懺悔，為彌補(bǔ)自己犯下的錯(cuò)誤而與自己曾經(jīng)工作過(guò)的律師事務(wù)所對(duì)簿公堂的故事。

? ? ? ? ? ? ?</span>

? ? ? ? ?</div>

? ? ?</div>

? ? ?

? ? ?<div>

? ? ? ? ?<div>

? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1eef0001c62903830217.png" />

? ? ? ? ? ? ?<span>

? ? ? ? ? ? ?<strong>父子刑警</strong>本劇改編自雫井修介小說(shuō)《Bitter Blood》。劇中，新晉刑警?佐原夏輝（佐藤健飾）被分配到銀座警察

? ? ? ? ? ? ?</span>

? ? ? ? ?</div>

? ? ?</div>

? ? ?

? ? ?<div>

? ? ? ? ?<div>

? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1f4e0001f90c02850210.png" />

? ? ? ? ? ? ?<span>

? ? ? ? ? ? ?<strong>果寶特攻3</strong>果寶特攻3,顧名思義是果寶特攻的第二部續(xù)集,已在國(guó)家廣播電影電視總局備案.暫定劇情為:菠蘿吹雪偶然間穿越到了古代的水果世界

? ? ? ? ? ? ?</span>

? ? ? ? ?</div>

? ? ?</div>

? ? ?<div>

? ? ? ? ?<div>

? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1f5500017d5603190214.png" />

? ? ? ? ? ? ?<span>

? ? ? ? ? ? ?<strong>紅眼</strong>1988年7月16日，從漢城始發(fā)的列車(chē)發(fā)生了一起嚴(yán)重的交通事故，造成100多人死亡。

? ? ? ? ? ? ?</span>

? ? ? ? ?</div>

? ? ?</div>

? ? ?<div>

? ? ? ? ?<div>

? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1f620001874503500209.png" />

? ? ? ? ? ? ?<span>

? ? ? ? ? ? ?<strong>熊出沒(méi)之奪寶熊兵</strong>一場(chǎng)漆黑雨夜的意外事故，一段笑料十足的誤打誤撞，將兩個(gè)外表相似卻內(nèi)容各異的箱子調(diào)換。

? ? ? ? ? ? ?</span>

? ? ? ? ?</div>

? ? ?</div>

</div>

</body>

</html>

代碼如上,與提供的參考代碼是相同的,但是沒(méi)有3D變換效果，很是奇怪

媽媽說(shuō)要好好學(xué)習(xí)

2016-03-07

源自：十天精通CSS3 12-4

關(guān)注問(wèn)題我要回答

498

操作

收起

1 回答

習(xí)慣陳默
2016-03-07

不可能

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

媽媽說(shuō)要好好學(xué)習(xí) 提問(wèn)者

可能這的確是一個(gè)未知的BUG，因?yàn)槲冶镜匚募A里的一個(gè)相同html文件也可以展示出3D效果。我就是奇怪，同樣兩個(gè)html，在相同的環(huán)境下運(yùn)行，一個(gè)有效一個(gè)失效。。。

2016-03-07 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150

提交

取消

十天精通CSS3

參與學(xué)習(xí) 243053 人
解答問(wèn)題 2677 個(gè)

本課程為CSS3入門(mén)教程，深刻詳解CSS3知識(shí)讓網(wǎng)頁(yè)穿上絢麗裝備

進(jìn)入課程

本課相似問(wèn)答

1 回答代碼有bug

1 回答這個(gè)好難啊。抄代碼都出了bug，如圖~~~求助~~~~~

2 回答代碼出現(xiàn)語(yǔ)法錯(cuò)誤

1 回答BUG呀BUG,固執(zhí)己見(jiàn)

1 回答這些代碼是什么意思啊，哪里都有它們出現(xiàn)

搜索更多本課相關(guān)問(wèn)答

代碼出現(xiàn)bug了嗎?

我要回答關(guān)注問(wèn)題

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

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

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

熱搜

最近搜索清空

代碼出現(xiàn)bug了嗎?

1 回答

本課相似問(wèn)答

代碼出現(xiàn)bug了嗎?