Heim > Artikel > Web-Frontend > CSS3实现的具有闪烁动画效果的导航菜单_html/css_WEB-ITnose
CSS3实现的具有闪烁动画效果的导航菜单_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:041158Durchsuche
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/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css的after伪对象选择器简单介绍_html/css_WEB-ITnoseNächster Artikel：CSS3实现的横向二级下拉菜单代码实例_html/css_WEB-ITnose