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

為了賬號安全，請及時綁定郵箱和手機立即綁定

老師，我們家這個課后作業怎么這么難??？？？？？

我好像個智障，全白學了。。。。。。。。。。。。。。。

正在回答

1 回答

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>制作3D旋轉導航</title>

<style>

* {

list-style: none;

}


/*任務一：引入本地字體文件*/


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;

/*調用本地字體*/

font-family: 'sansationregular';

font-smoothing: antialiased;

text-transform: capitalize;

overflow: visible;

line-height: 20px;

font-size: 20px;

padding: 15px 30px 15px 31px;

}



.three-d {


/* 任務三、設置3D舞臺布景 */

perspective: 200px;


/*任務四、設置3D舞臺布景過渡效果*/

transition: all 0.7s linear;

position: relative;

}


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

cursor: pointer;

}


/*任務五、給不是當前狀態的3D舞臺的懸浮與聚焦狀態設置變形效果*/

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

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

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

}


.three-d-box {

/*任務六、給3D舞臺中“.three-d-box”設置過渡與變形效果*/

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

}


/*任務七、給導航設置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;

}


/*任務八、設置導航當前狀態與懸浮狀態下的背景效果*/

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

}


/*任務九、顯示下拉導航菜單，并其設置一個變形效果*/

.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 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
十天精通CSS3
  • 參與學習       243058    人
  • 解答問題       2677    個

本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備

進入課程

老師，我們家這個課后作業怎么這么難??？？？？？

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號