css实现30款不同风格鼠标悬浮导航按钮动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：css实现30款不同风格鼠标悬浮导航按钮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>几个简单的导航栏样式</title>

    <style>
        body {
        	font-family: 'Raleway', sans-serif;
        	line-height:normal;
        	margin:0;
        	padding:0;
        }
        
        html {
        font-family:sans-serif;
        -ms-text-size-adjust:100%;
        -webkit-text-size-adjust:100%;
        }
        
        article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
        display:block;
        }
        a:focus {
        outline:thin dotted;
        }
        
        a:active,a:hover {
        outline:0;
        }
        img {
        border:0;
        }
        
        
        section {
        	background:#fff;
        	margin: 0 auto;
        	padding: 5em 2em;
        	text-align: center;
        }
        section:nth-child(even) {
            background: #fafafa;
        }
        section  h2 {
            margin: 0;
            padding: 0 0 2em;
        }
        footer {
        	background: #fafafa;
        	margin: 0 auto;
        	padding: 5em 2em;
        	text-align: center;
        }
        
        
        
        .container{
        	margin:0 auto;	
        }
        
        #header {
        	background:#a89ef1;
        	font-family: 'Raleway', sans-serif;
        	padding: 5em 0;
        	text-align: center;
        }
        #header i.fa {
        	color:#6559bc;
        	font-size:35px;
        }
        
        #header h1 {
            color: #6559bc;
            font-size: 2.5em;
            font-weight: 300;
            margin: 0;
            padding: 0.3em 0;
        }
        #header h3 small {
        	color:#6559bc;
        	font-weight:normal;
            background: #fff none repeat scroll 0 0;
            font-size: 13px;
            padding: 0 12px;
        }
        #header h3 {
            border-bottom: 1px solid #6559bc;
            color: #fff;
            margin: 0 auto 12px;
            padding: 0 0 5px;
            width: 35%;
        }
        
        #header p {
            color: #fff;
            display: inline-block;
            margin: 0;
            padding: 0;
        }
        
        
        
        
        
        .rtnav{
        	background:#6559bc;
        	width: 100%;
        	
        	border-bottom: 1px solid #e1e1e1;
        	/* animation magic */
        	-webkit-transition: all 0.4s ease-in-out;
        	-moz-transition: all 0.4s ease-in-out;
        	z-index: 9999;
        	top: 0;
        	position: fixed;
        }
        .shrink {
          padding: 20px 0;
        }
        .rtnav ul{
        	text-align:center;
        	margin:0;
        	padding:0;	
        }
        .rtnav ul li{
        	list-style:none;	
        	display:inline-block;
        }
        
        .rtnav a {
            color: #fff;
            display: inline-block;
            font-size: 14px;
            font-weight: 300;
            letter-spacing: 1px;
            padding:20px 10px;
            outline: medium none;
            position: relative;
            text-decoration: none;
            text-transform: capitalize;
        }
        
        .rtnav a:hover,
        .rtnav a:focus {
        	outline: none;
        }
        
            
        /* ******************************************************
        	Basic Styling
        *********************************************************/
        
        .ayanEffects ul{
        	margin:0;
        	padding:0;
        	text-align:center;
        }
        .ayanEffects li{
        	list-style:none;
        	display:inline-block;
        	margin: 15px 25px;
        }
        .ayanEffects li a{
        	font-family: 'Lato', sans-serif;
        	font-weight: 400;
        	font-size: 1.35em;
        	position: relative;
        	display: inline-block;
        	outline: none;
        	color: #000;
        	text-decoration: none;
        	text-transform: uppercase;
        	letter-spacing: 1px;
        }
        .ayanEffects a:hover,
        .ayanEffects a:focus {
        	outline: none;
        }
        
        
        
        /* ******************************************************
        	Effect 1: Swipe .ayanHoverEffect_1
        *********************************************************/
        
        
        .ayanHoverEffect_1 li a {
          position: relative;
          overflow: hidden;
          display: block;
          text-align: center;
          -webkit-box-flex: 1;
          -webkit-flex-grow: 1;
              -ms-flex-positive: 1;
                  flex-grow: 1;
        	-webkit-animation-duration: 1s;
        	animation-duration: 1s;
        	-webkit-animation-fill-mode: both;
        	animation-fill-mode: both;
        }
        .ayanHoverEffect_1 li a span {
          display: block;
          -webkit-transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        .ayanHoverEffect_1 li a:after {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          content: attr(data-link-alt);
          display: inline;
          text-align: center;
           -webkit-transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        .ayanHoverEffect_1 li a:hover {
          color:#6559bc;
          cursor: -webkit-grab;
          cursor: grab;
        }
        .ayanHoverEffect_1 li a:hover span {
        	color:#6559bc;
        	-webkit-transform: translateY(-100%);
        	transform: translateY(-100%);
        }
        .ayanHoverEffect_1 li a:hover:after {
          top: 0;
        }
        .ayanHoverEffect_1 li a:active {
        	-webkit-animation-name: rubberBand;
            animation-name: rubberBand;
        	cursor: -webkit-grabbing;
        	cursor: grabbing;
        }
        
        
        /* ******************************************************
        	Effect 2: Changer .ayanHoverEffect_2
        *********************************************************/
        
        .ayanHoverEffect_2 li {
          position: relative;
          display: inline-block;
          overflow: hidden;
        }
        
        .ayanHoverEffect_2 li a {
        
          -webkit-transition: -webkit-transform 0.5s ease;
          transition: -webkit-transform 0.5s ease;
          transition: transform 0.5s ease;
          transition: transform 0.5s ease, -webkit-transform 0.5s ease;
          -webkit-transition: transform 0.5s ease;
        }
        
        .ayanHoverEffect_2 li a:before {
          position: absolute;
          top: 100%;
          content: attr(data-link-alt);
          color: #6559bc;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        
        .ayanHoverEffect_2 li:hover a,
        .ayanHoverEffect_2 li:focus a {
          -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
        }
        
        
        /* ******************************************************
        	Effect 3: Topliner .ayanHoverEffect_3
        *********************************************************/
        
        
        .ayanHoverEffect_3 a {
        	padding: 0 20px;
        	line-height: 45px;
        }
        
        .ayanHoverEffect_3 a::before {
        	position: absolute;
        	content: '';
        	width: 50px;
        	height: 3px;
        	-webkit-transition: all 0.3s;
        	-moz-transition: all 0.3s;
        	transition: all 0.3s;
        	pointer-events: none;
        }
        .ayanHoverEffect_3 a:hover{
        	color:#6559bc;	
        }
        .ayanHoverEffect_3 a:hover::before,
        .ayanHoverEffect_3 a:hover::after,
        .ayanHoverEffect_3 a:focus::before,
        .ayanHoverEffect_3 a:focus::after {
        	background: #6559bc;
        }
        
        .ayanHoverEffect_3 a:hover::before,
        .ayanHoverEffect_3 a:focus::before {
        	left: 50%;
        	-webkit-transform: rotate(0deg) translateX(-50%);
        	-moz-transform: rotate(0deg) translateX(-50%);
        	transform: rotate(0deg) translateX(-50%);
        }
        
        .ayanHoverEffect_3 a:hover::after,
        .ayanHoverEffect_3 a:focus::after {
        	right: 50%;
        	-webkit-transform: rotate(0deg) translateX(50%);
        	-moz-transform: rotate(0deg) translateX(50%);
        	transform: rotate(0deg) translateX(50%);
        }
        
        /* ******************************************************
        	Effect 3: Center Line .ayanHoverEffect_4
        *********************************************************/
        
        .ayanHoverEffect_4 a {
          position: absolute;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
        }
        .ayanHoverEffect_4 li a {
          top: 50%;
          left: 50%;
          z-index: 1;
          text-decoration: none;
          outline: 0;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
        }
        .ayanHoverEffect_4 li a:hover{
        	color:#6559bc;	
        }
        .ayanHoverEffect_4 li a:after {
          background: #6559bc;
          content: "";
          height: 3px;
          width: 0;
          position: absolute;
          left: 50%;
          bottom: -15px;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          
          -webkit-transform: translateX(-50%);
          -moz-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          -o-transform: translateX(-50%);
          transform: translateX(-50%);
          
          -webkit-transition: 0.35s all cubic-bezier(0.77, 0, 0.175, 1);
          -moz-transition: 0.35s all cubic-bezier(0.77, 0, 0.175, 1);
          transition: 0.35s all cubic-bezier(0.77, 0, 0.175, 1);
        }
        .ayanHoverEffect_4 li a:hover:after {
        	color:#6559bc;
            width: 100%;
        }
        
        /* ******************************************************
        	Effect 5: Roll Box .ayanHoverEffect_5
        *********************************************************/
        
        
        .ayanHoverEffect_5 a {
          word-wrap: break-word;
          text-decoration: none;
        }
        .ayanHoverEffect_5 a {
          display: inline-block;
          perspective: 600px;
          perspective-origin: 50% 50%;
          overflow: hidden;
        }
        
        .ayanHoverEffect_5 a span {
        	font-family: 'Lato', sans-serif;
        	font-weight: 400;
        	position: relative;
        	outline: none;
        	color: #000;
        	text-decoration: none;
        	text-transform: uppercase;
        	letter-spacing: 1px;
        	
          display: block;
          padding: 0 10px;
          transform-origin: 50% 0;
          transform-style: preserve-3d;
          transition: all 400ms ease 0s;
        }
        
        .ayanHoverEffect_5 a span:after {
          background: none repeat scroll 0 0 #6559bc;
          color: #fff;
          content: attr(data-link-alt);
          display: block;
          padding: 0 10px;
          position: absolute;
          top: 0;
          left: 0;
          transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
          transform-origin: 50% 0%;
        }
        
        .ayanHoverEffect_5 a:hover span {
          background: none repeat scroll 0 0 #6559bc;
          transform: translate3d(0px, 0px, -30px) rotateX(90deg);
        }
        
        /* ******************************************************
        	Effect 6: Starter Line .ayanHoverEffect_6
        *********************************************************/
        
        
        
        .ayanHoverEffect_6 a::after {
          background-color: #6559bc;	
          content: "";
          width: 0;
          height: 4px;
          position: absolute;
          bottom: -10px;
          left: 0;
          transition: width 500ms ease;
        }
        
        .ayanHoverEffect_6 a:hover::after {
          width: 100%;
        }
        
        /* *************************************************.........完整代码请登录后点击上方下载按钮下载查看