ホームページ > 記事 > ウェブフロントエンド > CSS3_html/css_WEB-ITnose によって実装された点滅アニメーション効果を備えたナビゲーション メニュー
CSS3_html/css_WEB-ITnose によって実装された点滅アニメーション効果を備えたナビゲーション メニュー
- WBOYオリジナル
- 2016-06-24 11:31:041226ブラウズ
CSS3 で実装された点滅アニメーション効果のあるナビゲーション メニュー:
点滅効果のあるナビゲーション メニューは CSS3 なしで実装するのは困難ですが、CSS3 にはブラウザ互換性という大きな問題があり、現在は十分に使用されていません。なぜなら、より少ないコードで素晴らしい効果を達成できるからです。
コード例は次のとおりです:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">*{ margin:0; padding:0; list-style:none; font-style:normal; text-decoration:none; font-family:"微软雅黑";}.nav{ overflow:hidden; zoom:1;}.nav li{ float:left; display:inline; position:relative; height:30px; line-height:30px; overflow:hidden; background:green;}.nav a{ display:block; text-align:center; color:#fff; position:relative;}.nav a:hover {color:#ff0;}/*因为ie6-9浏览器不支持动画，所以这里定义成鼠标放上去菜单文字变黄色*/.nav i, .nav em{ position:relative; display:block; left:0; padding:0 20px; -moz-transition:0.3s all ease; -ms-transition:0.3s all ease; -webkit-transition:0.3s all ease;}.nav i{top:0;}.nav em{top:-90px;}.nav li:hover i{ -moz-transform:translateY(-30px); -ms-transform:translateY(-30px); -webkit-transform:translateY(-30px);}.nav li:hover em{ -moz-transform:translateY(30px); -ms-transform:translateY(30px); -webkit-transform:translateY(30px);}</style><script type="text/javascript">function css3Nav(obj){ var aA=obj.getElementsByTagName('a'); var arr=[]; for(var i=0; i<aA.length; i++){ arr.push(aA[i].innerHTML); var str=arr[i]; aA[i].innerHTML=str+'<i>'+str+'</i><em>'+str+'</em>'; }}window.onload=function(){ var oUl=document.getElementById('nav'); var oUl2=document.getElementById('nav2'); css3Nav(oUl); css3Nav(oUl2);}</script></head><body><ul id="nav" class="nav"> <li><a href="#">蚂蚁部落一</a></li> <li><a href="#">蚂蚁部落二</a></li> <li><a href="#">蚂蚁部落三</a></li> <li><a href="#">蚂蚁部落四</a></li> <li><a href="#">蚂蚁部落五</a></li></ul></body></html> 元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=10895
詳細については、次を参照してください: http:/ /www.softwhy.com /divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。