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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

老師，我們家這個(gè)課后作業(yè)怎么這么難啊？？？？？

我好像個(gè)智障，全白學(xué)了。。。。。。。。。。。。。。。

正在回答

1 回答

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

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

<style>

* {

list-style: none;

}


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


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

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;


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

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

}


.three-d-box {

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

transform: translateZ(-25px);

transition: all .3s ease-out;

transform-style: preserve-3d;

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

}


.back {

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;

pointer-events: none;

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;

transition: all 0.3s ease-in;

transform-origin: 0px 0px;

transform: rotateX(-90deg);

backface-visibility: hidden;

}


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

.nav-menu>li:hover ul {

display: block;

transform: rotateX(0deg);

}

</style>

</head>

<body>

<div id="nav">

<ul class="nav-menu clearfix unstyled">

<li><a href="#" class="three-d active">

Home

<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>

</a></li>

<li><a href="#" class="three-d">

Services

<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>

</a></li>

<li><a href="#" class="three-d">

Products

<span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>

</a></li>

<li><a href="#" class="three-d">

About

<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>

</a></li>

<li><a href="#" class="three-d">

Contact

<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>

</a></li>

<li><a href="#" class="three-d">

Blog

<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span></a>

<ul class="clearfix unstyled drop-menu">

<li><a href="#" class="three-d">

Html5

<span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>

</a></li>

<li><a href="#" class="three-d">

Css3

<span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>

</a></li>

<li><a href="#" class="three-d">

JavaScript

<span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>

</a></li>

<li><a href="#" class="three-d">

Videogames

<span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>

</a></li>

</ul>

</li>

<li><a href="#" class="three-d">

Shop On-line

<span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>

</a></li>

</ul>

</div>

</body>

</html>


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

舉報(bào)

0/150
提交
取消
十天精通CSS3
  • 參與學(xué)習(xí)       243034    人
  • 解答問題       2661    個(gè)

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

進(jìn)入課程

老師，我們家這個(gè)課后作業(yè)怎么這么難?。?？？？？

我要回答 關(guān)注問題
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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