溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“css3實現3D動畫導航欄的示例”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“css3實現3D動畫導航欄的示例”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。
頁面布局 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <p class="nav"> <ul> <li> <a class="tooltip tooltip-effect-1" href="#">Home <span class="tooltip-content"> <i class="fa fa-fw fa-home"></i> </span> </a> </li> <li> <a class="tooltip tooltip-effect-2" href="#">About me <span class="tooltip-content"> <i class="fa fa-fw fa-user"></i> </span> </a> </li> <li> <a class="tooltip tooltip-effect-3" href="#">Photography <span class="tooltip-content"> <i class="fa fa-fw fa-camera-retro"></i> </span> </a> </li> <li> <a class="tooltip tooltip-effect-4" href="#">Work <span class="tooltip-content"> <i class="fa fa-fw fa-briefcase"></i> </span> </a> </li> <li> <a class="tooltip tooltip-effect-5" href="#">Contact <span class="tooltip-content"> <i class="fa fa-fw fa-envelope"></i> </span> </a> </li> </ul> </p> </body> </html>
樣式
*{
-webkit-box-sizing: border-box;
}
html,body {
margin: 0;
padding: 0;
height: 100%;
background: #47c9af;;
color: #74777b;
font-family: 'Raleway', Arial, sans-serif;
}
ul {
list-style: none;
}
a{
text-decoration: none;
color: rgba(0, 0, 0, 0.3);
display: inline-block;
font-weight: 700;
}
a:hover, .nav a:focus {
color: #fff;
}
.nav {
width: 820px;
height: 300px;
margin: 200px auto 0 auto;
font-weight: 300;
}
.nav ul li {
display: inline-block;
position: relative;
margin: 0 20px;
font-size: 1.5em;
}
.tooltip-content {
position: absolute;
width: 80px;
height: 80px;
padding-top: 25px;
left: 50%;
margin-left: -40px;
bottom: 20px;
border-radius: 50%;
text-align: center;
background: #fff;
color: #47c9af;
opacity: 0;
margin-bottom: 20px;
cursor: pointer;
}
.tooltip-effect-1 .tooltip-content {
-webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);
-webkit-transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}
.tooltip-effect-1 .tooltip-content i {
-webkit-transform: scale3d(0, 0, 1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}
.tooltip-effect-2 .tooltip-content {
-webkit-transform: translate3d(0, 10px, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}
.tooltip-effect-2 .tooltip-content i {
-webkit-transform: translate3d(0, 15px, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}
.tooltip-effect-3 .tooltip-content {
-webkit-transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);
-webkit-transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}
.tooltip-effect-3 .tooltip-content i {
-webkit-transform: scale3d(0, 0, 1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}
.tooltip-effect-4 .tooltip-content {
-webkit-transform: translate3d(0, -20px, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}
.tooltip-effect-4 .tooltip-content i {
-webkit-transform: translate3d(0, 20px, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}
.tooltip-effect-5 .tooltip-content {
-webkit-transform: scale3d(0, 0, 1);
-webkit-transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}
.tooltip-effect-5 .tooltip-content i {
-webkit-transform: translate3d(0, 20px, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}以上是“css3實現3D動畫導航欄的示例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
