基于CSS3制作的鼠标悬停动画菜单_html/css_WEB-ITnose
Jun 24, 2016 am 11:49 AM
之前分享了好多款css3实现的鼠标悬停效果。今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单。这款菜单适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
<div class="page"> <section class="demo"> <nav class="nav"> <ul> <li><a href="http://www.w2bc.com/"><span>Home </span></a></li> <li><a href="http://www.w2bc.com/"><span>Phone </span></a></li> <li><a href="http://www.w2bc.com/"><span>Wifi </span></a></li> <li><a href="http://www.w2bc.com/"><span>Setting </span></a></li> <li><a href="http://www.w2bc.com/"><span>Twitter </span></a></li> </ul> </nav> </section> </div>
css3代码:
@charset "utf-8";/*科e互联特效基本框架CSS*/body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}div {text-align:left}a img {border:0}body { color: #333; text-align: center; font: 12px "微软雅黑"; }ul, ol, li {list-style-type:none;vertical-align:0}a {outline-style:none;color:#535353;text-decoration:none}a:hover { color: #D40000; text-decoration: none}.clear{height:0; overflow:hidden; clear:both}/* 效果CSS开始 */body { -webkit-backface-visibility: hidden;} .demo { margin: 0px auto; text-align:center;} .nav li { position: relative; display: inline-block; margin-left: -50px; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear;}.nav li a { display: inline-block; width: 120px; height: 120px; padding: 30px; border-radius: 50%; border-width: 8px; border-style: solid;}.nav li:hover { z-index: 11; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}.nav li:hover a { text-decoration: none;}.nav li:hover span { -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; -webkit-animation: moveFromBottom 0.3s ease; -moz-animation: moveFromBottom 0.3s ease; -o-animation: moveFromBottom 0.3s ease; -ms-animation: moveFromBottom 0.3s ease; animation: moveFromBottom 0.3s ease;}.nav li:nth-child(1) a { color: #4d9683; text-shadow: 0 1px 0 #9de3cf; border-color: #549e89; background-color: #51c9a7;}.nav li:nth-child(2) a { color: #be607e; text-shadow: 0 1px 0 #de8ba5; border-color: #e499b0; background-color: #e67b9c;}.nav li:nth-child(3) a { color: #5e9eb4; text-shadow: 0 1px 0 #adddec; border-color: #a2cfde; background-color: #7ec9e3;}.nav li:nth-child(4) a { color: #ba9d5e; text-shadow: 0 1px 0 #f5e0ad; border-color: #dcc999; background-color: #f0cd78;}.nav li:nth-child(5) a { color: #b468a2; text-shadow: 0 1px 0 #e8acd8; border-color: #d8abcd; background-color: #dd91cb;}.nav li:nth-child(1):hover a { color: #0f775c; text-shadow: 0 1px 0 #81e6c9; border-color: #0a8462; background-color: #00c18c;}.nav li:nth-child(2):hover a { color: #b12a55; text-shadow: 0 1px 0 #ff95b7; border-color: #ba335c; background-color: #ea5180;}.nav li:nth-child(3):hover a { color: #2883a2; text-shadow: 0 1px 0 #9cdef2; border-color: #4397b3; background-color: #55c1e5;}.nav li:nth-child(4):hover a { color: #ab8228; text-shadow: 0 1px 0 #ffe199; border-color: #b08f3e; background-color: #f8c64d;}.nav li:nth-child(5):hover a { color: #a33689; text-shadow: 0 1px 0 #ec97d6; border-color: #b7569f; background-color: #dd70c3;}.nav span { display: block; line-height:70px; font-size: 30px; font-style: normal;}.nav span:before { display: block;}.nav li:nth-child(1) span:before { content: "home";}.nav li:nth-child(2) span:before { content: "phone";}.nav li:nth-child(3) span:before { content: "wifi";}.nav li:nth-child(4) span:before { content: "setting";}.nav li:nth-child(5) span:before { content: "twitter";}@-webkit-keyframes moveFromBottom { from { -webkit-transform: translateY(120%) scale(0.5) ; opacity: 0; } to { -webkit-transform: translateY(0%) scale(1); opacity: 1; }}@-moz-keyframes moveFromBottom { from { -moz-transform: translateY(120%) scale(0.5) ; opacity: 0; } to { -moz-transform: translateY(0%) scale(1); opacity: 1; }}@-ms-keyframes moveFromBottom { from { -ms-transform: translateY(120%) scale(0.5) ; opacity: 0; } to { -ms-transform: translateY(0%) scale(1); opacity: 1; }}@-o-keyframes moveFromBottom { from { -o-transform: translateY(120%) scale(0.5) ; opacity: 0; } to { -o-transform: translateY(0%) scale(1); opacity: 1; }}@keyframes moveFromBottom { from { transform: translateY(120%) scale(0.5) ; opacity: 0; } to { transform: translateY(0%) scale(1); opacity: 1; }}.nav span:before { font-family: 'LigatureSymbols'; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-font-feature-settings: "liga" 1, "dlig" 1; -moz-font-feature-settings: "liga=1, dlig=1"; -ms-font-feature-settings: "liga" 1, "dlig" 1; font-feature-settings: "liga" 1, "dlig" 1; font-size: 80px;}@font-face { font-family: 'LigatureSymbols'; src: url('../font/LigatureSymbols-2.05.eot'); src: url('../font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'), url('../font/LigatureSymbols-2.05.woff') format('woff'), url('../font/LigatureSymbols-2.05.ttf') format('truetype'), url('../font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg'); font-weight: normal; font-style: normal;}/* 效果CSS结束 */
via:http://www.w2bc.com/Article/19450

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?

Quel est le but du & lt; mètre & gt; élément?

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?

Quel est le but du & lt; datalist & gt; élément?

Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage?
