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

比較復(fù)雜，先在這里碼一下

JoV

2014-12-26

源自：十天精通CSS3 9-10

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

1030

操作

收起

1 回答

QLwang_web
2016-01-15

<!doctype html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title>制作3D旋轉(zhuǎn)導(dǎo)航</title>

<style>

? ? ? ? @import url("http://www.w3cplus.com/demo/css3/base.css");

? ? ? ? /*任務(wù)一：引入本地字體文件*/

? ? ? ? @font-face{

? ? ? ? ?font-family: 'sansationregular';

? ? ? ? ?src:url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');

src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),

url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),

url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),

url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');

font-weight: normal;

font-style: normal;

? ? ? ? }

? ? ? ? body {

? ? ? ? ?background-color:#edecec;

? ? ? ? }

? ? ? ??

? ? ? ? /* basic menu styles */

? ? ? ? .nav-menu {

? ? ? ? ? display: block;

? ? ? ? ?background: #74adaa;

? ? ? ? ?width:950px;

? ? ? ? ?margin: 50px auto 150px;

? ? ? ? }

? ? ? ? .nav-menu > li {

? ? ? ? ? display: inline;

? ? ? ? ? float:left;

? ? ? ? ?border-right:1px solid #94c0be;

? ? ? ? }

? ? ? ? .nav-menu > li:last-child {

? ? ? ? ? border-right: none;

? ? ? ? }

? ? ? ? .nav-menu li a {

? ? ? ? ? color: #fff;

? ? ? ? ?display: block;

? ? ? ? ?text-decoration: none;

? ? ? ? ? /*調(diào)用本地字體*/

? ? ? ? ?font-family: 'sansationregular';

? ? ? ? ? -webkit-font-smoothing: antialiased;

? ? ? ? ?-moz-font-smoothing: antialiased;

? ? ? ? ?font-smoothing: antialiased;

? ? ? ? ?text-transform: capitalize;

? ? ? ? ?overflow: visible;

? ? ? ? ?line-height: 20px;

? ? ? ? ?font-size: 20px;

? ? ? ? ?padding: 15px 30px 15px 31px;

? ? ? ? }

? ? ? ??

? ? ? ? .three-d {

? ? ? ? ? /* 任務(wù)三、設(shè)置3D舞臺(tái)布景 */

? ? ? ? ?perspective:200px;

? ? ? ? ?-o-perspective:200px;

? ? ? ? ?-webkit-perspective:200px;

? ? ? ? ?-moz-perspective:200px;

? ? ? ? ?-ms-perspective:200px;

? ? ? ? ? /*任務(wù)四、設(shè)置3D舞臺(tái)布景過(guò)渡效果*/

? ? ? ? ?transition:all 0.7s linear;

? ? ? ? ?-o-transition:all 0.7s linear;

? ? ? ? ?-ms-transition:all 0.7s linear;

? ? ? ? ?-moz-transition:all 0.7s linear;

? ? ? ? ?-webkit-transition:all 0.7s linear;

? ? ? ? ? position: relative;

? ? ? ? }

? ? ? ??

? ? ? ? .three-d:not(.active):hover {

? ? ? ? ? cursor: pointer;

? ? ? ? }

? ? ? ??

? ? ? ? /*任務(wù)五、給不是當(dāng)前狀態(tài)的3D舞臺(tái)的懸浮與聚焦?fàn)顟B(tài)設(shè)置變形效果*/

? ? ? ? .three-d:not(.active):hover .three-d-box,?

? ? ? ? .three-d:not(.active):focus .three-d-box {

? ? ? ? ?transform:translateZ(-25px) rotateX(90deg);

? ? ? ? ?-o-transform:translateZ(-25px) rotateX(90deg);

? ? ? ? ?-ms-transform:translateZ(-25px) rotateX(90deg);

? ? ? ? ?-moz-transform:translateZ(-25px) rotateX(90deg);

? ? ? ? ?-webkit-transform:translateZ(-25px) rotateX(90deg);

? ? ? ? }

? ? ? ??

? ? ? ? .three-d-box {

? ? ? ? ? /*任務(wù)六、給3D舞臺(tái)中“.three-d-box”設(shè)置過(guò)渡與變形效果*/

transform:translateZ(-25px);

? ? ? ? ?-o-transform:translateZ(-25px);

? ? ? ? ?-ms-transform:translateZ(-25px);

? ? ? ? ?-moz-transform:translateZ(-25px);

? ? ? ? ?-webkit-transform:translateZ(-25px);

? ? ? ? ?transition:all .3s ease-out;

? ? ? ? ?-o-transition:all .3s ease-out;

? ? ? ? ?-ms-transition:all .3s ease-out;

? ? ? ? ?-moz-transition:all .3s ease-out;

? ? ? ? ?-webkit-transition:all .3s ease-out;

? ? ? ? ? -webkit-transform-style: preserve-3d;

? ? ? ? ? -moz-transform-style: preserve-3d;

? ? ? ? ? -ms-transform-style: preserve-3d;

? ? ? ? ? -o-transform-style: preserve-3d;

? ? ? ? ? transform-style: preserve-3d;

? ? ? ? ? -webkit-pointer-events: none;

? ? ? ? ? -moz-pointer-events: none;

? ? ? ? ? -ms-pointer-events: none;

? ? ? ? ? -o-pointer-events: none;

? ? ? ? ? pointer-events: none;

? ? ? ? ? position: absolute;

? ? ? ? ? top: 0;

? ? ? ? ?left: 0;

? ? ? ? ?display: block;

? ? ? ? ?width: 100%;

? ? ? ? ?height: 100%;

? ? ? ? }

? ? ? ??

? ? ? ? /*任務(wù)七、給導(dǎo)航設(shè)置3D前，與3D后變形效果*/

? ? ? ? .front {

? ? ? ? ?transform:rotateX(0deg) translateZ(25px);

? ? ? ? ?-ms-transform:rotateX(0deg) translateZ(25px);

? ? ? ? ?-o-transform:rotateX(0deg) translateZ(25px);

? ? ? ? ?-moz-transform:rotateX(0deg) translateZ(25px);

? ? ? ? ?-webkit-transform:rotateX(0deg) translateZ(25px);

? ? ? ? ?}

? ? ? ??

? ? ? ? .back {

? ? ? ? ?transform:rotateX(-90deg) translateZ(25px);

? ? ? ? ?-ms-transform:rotateX(-90deg) translateZ(25px);

? ? ? ? ?-o-transform:rotateX(-90deg) translateZ(25px);

? ? ? ? ?-moz-transform:rotateX(-90deg) translateZ(25px);

? ? ? ? ?-webkit-transform:rotateX(-90deg) translateZ(25px);

? ? ? ? ? color: #FFE7C4;

? ? ? ? }

? ? ? ??

? ? ? ? .front, .back {

? ? ? ? ? display: block;

? ? ? ? ?width: 100%;

? ? ? ? ?height: 100%;

? ? ? ? ?position: absolute;

? ? ? ? ?top: 0;

? ? ? ? ?left: 0;

? ? ? ? ?background: #74adaa;

? ? ? ? ?padding: 15px 30px 15px 31px;

? ? ? ? ?color: white;

? ? ? ? ?-webkit-pointer-events: none;

? ? ? ? ? -moz-pointer-events: none;

? ? ? ? ? -ms-pointer-events: none;

? ? ? ? ? -o-pointer-events: none;

? ? ? ? ? pointer-events: none;

? ? ? ? ? -webkit-box-sizing: border-box;

? ? ? ? ? box-sizing: border-box;

? ? ? ? }

? ? ? ? /*任務(wù)八、設(shè)置導(dǎo)航當(dāng)前狀態(tài)與懸浮狀態(tài)下的背景效果*/

? ? ? ? .nav-menu li .active .front,

? ? ? ? .nav-menu li .active .back,

? ? ? ? .nav-menu li a:hover .front,

? ? ? ? .nav-menu li a:hover .back {

? ? ? ? ?background-color: #51938F;

? ? ? ? ?background-size: 5px 5px;

? ? ? ? ?background-position: 0 0, 30px 30px;

? ? ? ? ?background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

?background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

?background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

?background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

? ? ? ? ?/*background-image: -webkit-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-ms-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-moz-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-o-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238);*/

? ? ? ? }

? ? ? ? .nav-menu ul {

? ? ? ? ? position: absolute;

? ? ? ? ?text-align: left;

? ? ? ? ?line-height: 40px;

? ? ? ? ?font-size: 14px;

? ? ? ? ?width: 200px;

? ? ? ? ?-webkit-transition: all 0.3s ease-in;

? ? ? ? ? -moz-transition: all 0.3s ease-in;

? ? ? ? ? -ms-transition: all 0.3s ease-in;

? ? ? ? ? -o-transition: all 0.3s ease-in;

? ? ? ? ? transition: all 0.3s ease-in;

? ? ? ? ? -webkit-transform-origin: 0px 0px;

? ? ? ? ? -moz-transform-origin: 0px 0px;

? ? ? ? ? -ms-transform-origin: 0px 0px;

? ? ? ? ? -o-transform-origin: 0px 0px;

? ? ? ? ? transform-origin: 0px 0px;

? ? ? ? ? -webkit-transform: rotateX(-90deg);

? ? ? ? ? -moz-transform: rotateX(-90deg);

? ? ? ? ? -ms-transform: rotateX(-90deg);

? ? ? ? ? -o-transform: rotateX(-90deg);

? ? ? ? ? transform: rotateX(-90deg);

? ? ? ? ? -webkit-backface-visibility: hidden;

? ? ? ? ? -moz-backface-visibility: hidden;

? ? ? ? ? -ms-backface-visibility: hidden;

? ? ? ? ? -o-backface-visibility: hidden;

? ? ? ? ?backface-visibility: hidden;

? ? ? ? }

? ? ? ? /*任務(wù)九、顯示下拉導(dǎo)航菜單，并其設(shè)置一個(gè)變形效果*/

? ? ? ? .nav-menu > li:hover ul {

? ? ? ? ? display: block;

-webkit-transform: rotateX(0deg);

-moz-transform: rotateX(0deg);

-ms-transform: rotateX(0deg);

-o-transform: rotateX(0deg);

transform: rotateX(0deg); ? ? ? ? ?

? ? ? ? ?}

</style>

</head>

<body>

Home

HomeHome

</a></li>

Services

ServicesServices

</a></li>

Products

ProductsProducts

</a></li>

About

AboutAbout

</a></li>

Contact

ContactContact

</a></li>

Blog

BlogBlog</a>

Html5

Html5Html5

</a></li>

Css3

Css3Css3

</a></li>

JavaScript

JavaScriptJavaScript

</a></li>

Videogames

VideogamesVideogames

</a></li>

</ul>

</li>

Shop On-line

Shop On-lineShop On-line

</a></li>

</ul>

</div>

</body>

</html>

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

收起回答

舉報(bào)

0/150

提交

取消

十天精通CSS3

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

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

進(jìn)入課程

本課相似問(wèn)答

4 回答先在這里馬一下?。?！

1 回答感覺(jué)這種比較難，馬一下

1 回答好復(fù)雜。。。

1 回答偽類(lèi)的權(quán)值是不是比較低？

2 回答感覺(jué)這個(gè)練習(xí)題是不是放在選擇器那章以后比較合適。

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

比較復(fù)雜，先在這里碼一下

我要回答關(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,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

比較復(fù)雜，先在這里碼一下

1 回答

本課相似問(wèn)答

比較復(fù)雜，先在這里碼一下

比較復(fù)雜，先在這里碼一下

比較復(fù)雜，先在這里碼一下