css3实现光标悬浮滚动菜单-roucheng

效果：http://hovertree.com/texiao/css3/21/

本文所用到的CSS知识请点击效果展示也中第一和第二个链接。

代码：

   DOCTYPE html  > 
   html  > 
   head  > 
   meta   http-equiv  ="Content-Type"   content  ="text/html; charset=utf-8"  /> 
   title  >css3实现光标悬浮滚动菜单  - 何问起   title  >  base   target  ="_blank"   /> 
   meta   charset  ="utf-8"   /> 
   style  >  
html  {  height  :  100%  ;  font-family  :   'Roboto Condensed'  ;  }  
body  {  min-height  :  100%  ;   background-image  :   -webkit-radial-gradient(top, circle cover, #252233 0%, #252233 80%)  ;  
background-image  :   -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%)  ;  
background-image  :   -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%)  ;  
background-image  :   radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%)  ;  }   

*  {  margin  :  0  ;  padding  :  0  ;  }  

body  {  text-align  :  center  ;  padding  :  20px 0  ;  }  

h1  {  font-size  :  1.8em  ;  color  :  #fff  ;  margin-bottom  :  50px  ;  letter-spacing  :  -1px  ;  text-transform  :  capitalize  ;  text-shadow  :  0 2px 2px rgba(0,0,0,0.6)  ;  } 

 /*   scroll-menu   */  
.scroll-menu  {  background-color  :  rgba(0,0,0,0.4)  ;  border-bottom  :  1px solid rgba(255,255,255,0.25)  ;  box-shadow  :  0 0 8px rgba(0,0,0,0.4) inset  ;  border-radius  :  16px  ;  margin  :  0  ;  padding  :  0 30px  ;  }  
.scroll-menu  {  display  :  inline-block  ;  text-align  :  center  ;  height  :  50px  ;  overflow  :  hidden  ;  }  
.scroll-menu li a  {  letter-spacing  :  -1px  ;  text-decoration  :  none  ;  text-transform  :  uppercase  ;  color  :  #FFF  ;  }  
.scroll-menu li  {  float  :  left  ;  height  :  100%  ;  list-style  :  none  ;  margin  :  0 30px  ;  }  
.scroll-menu li *  {  display  :  inline-block  ;  font-size  :  1.3em  ;  line-height  :  50px  ;  }  
.scroll-menu li a  {  margin-top  :  -50px  ;  transition  :  0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4)  ;  }  
.scroll-menu li a:before  {  content  :  attr(data-text)  ;  /*  使用data-text属性的值  */  
display  :  block  ;  color  :  greenyellow  ;  }  
.scroll-menu li a:hover  {  margin-top  :  0  ;  }  
a  {  color  :  yellow  } 
   style  > 
   head  > 
   body  > 
   h1  >css3实现光标悬浮滚动菜单    h1  > 

   ul   class  ="scroll-menu"  > 
   li  >  a   data-text  ='CSS3'   href  ="http://hovertree.com/h/bjaf/css3before.htm"  > CSS   a  >  li  > 
   li  >  a   data-text  ="HTML5"   href  ="http://hovertree.com/h/bjaf/transition.htm"  > HTML   a  >  li  > 
   li  >  a   data-text  ="Javascript"   href  ="http://hovertree.com/menu/javascript/"  > JavaScript   a  >  li  > 
   li  >  a   data-text  ="何问起"   href  ="http://hovertree.com/"  > 何问起   a  >  li  > 
   ul  > 
   div  > 
   a   href  ="http://hovertree.com/"   id  ="hovertreebefore"  > 何问起   a  >     a   href  ="http://hovertree.com/h/bjaf/rnqpxtsq.htm"  > 原文   a  >     a   href  ="http://hovertree.com/texiao/"  > 特效库   a  > 
   div  > 
   body  > 
   html  >  

查看更多关于css3实现光标悬浮滚动菜单-roucheng的详细内容...