经验分享程序开发文档资料数据资源其它资源

CSS3实现鼠标悬停链接按钮代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现鼠标悬停链接按钮代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

CSS3实现鼠标悬停链接按钮代码

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<title>CSS3实现鼠标悬停链接按钮代码</title>
<link href="css/style.css" rel='stylesheet' type='text/css' />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</script>
</head>
<body>
	<div class="hover-buttons">
		<div class="wrap">
			<div class="bg-effect">
				<h1>Background Hover Effects</h2>
				<ul class="bt-list">
					<li>
						<a href="#" class="hvr-fade button">Fade</a>
						<a href="#" class="hvr-back-pulse button">Back Pulse</a>
						<a href="#" class="hvr-sweep-to-right button">Sweep To Right</a>
						<a href="#" class="hvr-sweep-to-left button">Sweep To Left</a>
					</li>
					<li>
						<a href="#" class="hvr-sweep-to-bottom button">Sweep To Bottom</a>
						<a href="#" class="hvr-sweep-to-top button">Sweep To Top</a>
						<a href="#" class="hvr-bounce-to-right button">Bounce To Right</a>
						<a href="#" class="hvr-bounce-to-left button">Bounce To Left</a>
					</li>
					<li>
						<a href="#" class="hvr-bounce-to-bottom button">Bounce To Bottom</a>
						<a href="#" class="hvr-bounce-to-top button">Bounce To Top</a>
						<a href="#" class="hvr-radial-out button">Radial Out</a>
						<a href="#" class="hvr-radial-in button">Radial In</a>
					</li>
					<li>
						<a href="#" class="hvr-rectangle-in button">Rectangle In</a>
						<a href="#" class="hvr-rectangle-out button">Rectangle Out</a>
						<a href="#" class="hvr-shutter-in-horizontal button">Shutter In Horizontal</a>
						<a href="#" class="hvr-shutter-out-horizontal button">Shutter Out Horizontal</a>
					</li>
					<li>
						<a href="#" class="hvr-shutter-in-vertical button">Shutter In Vertical</a>
						<a href="#" class="hvr-shutter-out-vertical button">Shutter Out Vertical</a>
					</li>
				</ul>
			</div>
			<div class="tr-effects">
				<h2>Border Transitions</h2>
				<ul class="border-list">
					<li>	
						<a href="#" class="hvr-border-fade button2">Border Fade</a>
						<a href="#" class="hvr-hollow button2">Hollow</a>
						<a href="#" class="hvr-trim button2">Trim</a>
						<a href="#" class="hvr-ripple-out button2">Ripple Out</a>
					</li>
					<li>
						<a href="#" class="hvr-outline-out button2">Outline Out</a>
						<a href="#" class="hvr-outline-in button2">Outline In</a>
						<a href="#" class="hvr-round-corners button2">Round Corners</a>
						<a href="#" class="hvr-underline-from-left button2">Underline From Left</a>

					</li>
					<li>
						<a href="#" class="hvr-underline-from-right button2">Underline From Right</a>
						<a href="#" class="hvr-reveal button2">Reveal</a>
						<a href="#" class="hvr-underline-reveal button2">Underline Reveal</a>
							<a href="#" class="hvr-overline-reveal button2">Overline Reveal</a>
					</li>
					<li>
						<a href="#" class="hvr-overline-from-left button2">Overline From Left</a>
						<a href="#" class="hvr-overline-from-center button2">Overline From Center</a>
						<a href="#" class="hvr-overline-from-right button2">Overline From Right</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

CSS代码(style.css):

body{font-family:'Open Sans',sans-serif;}
.wrap{width:70%;margin:0 auto;}
a.button,a.button2{/*display:inline-block;*/
 /*vertical-align:middle;*/
 padding:1em;cursor:pointer;background:none;text-decoration:none;font-size:1.2em;color:#666;/* Prevent highlight colour when element is tapped */
 -webkit-tap-highlight-color:rgba(0,0,0,0);}
.hover-buttons{padding:2em 0;}
.aligncenter{text-align:center;}
.hover-buttons h1,.tr-effects h2{font-size:3em;color:#fff;font-family:'Lora',serif;}
ul.bt-list li{display:inline-block;list-style:none;margin:0.9em 0;}
ul.bt-list li a{margin-right:6px;}
/* BACKGROUND TRANSITIONS */
/* Fade */
a.hvr-fade{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;overflow:hidden;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:color,background-color;transition-property:color,background-color;background:#e84c3d;color:#fff;}
a.hvr-fade:hover,a.hvr-fade:focus,a.hvr-fade:active{background-color:#ce2211;color:white;}
a.hvr-back-pulse{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;overflow:hidden;-webkit-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-property:color,background-color;transition-property:color,background-color;background:#2ecd71;color:#fff;}
a.hvr-back-pulse:hover,a.hvr-back-pulse:focus,a.hvr-back-pulse:active{-webkit-animation-name:hvr-back-pulse;animation-name:hvr-back-pulse;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-delay:0.5s;animation-delay:0.5s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;background-color:#0CBC56;color:white;}
/* Sweep To Right */
a.hvr-sweep-to-right{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s;background:#3598dc;color:#fff;}
a.hvr-sweep-to-right:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#2178B4;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-sweep-to-right:hover,a.hvr-sweep-to-right:focus,a.hvr-sweep-to-right:active{color:white;}
a.hvr-sweep-to-right:hover:before,a.hvr-sweep-to-right:focus:before,a.hvr-sweep-to-right:active:before{-webkit-transform:scaleX(1);transform:scaleX(1);}
/* Sweep To Left */
a.hvr-sweep-to-left{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s;background:#9a59b5;color:#fff;}
a.hvr-sweep-to-left:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#853ba3;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-sweep-to-left:hover,a.hvr-sweep-to-left:focus,a.hvr-sweep-to-left:active{color:white;}
a.hvr-sweep-to-left:hover:before,a.hvr-sweep-to-left:focus:before,a.hvr-sweep-to-left:active:before{-webkit-transform:scaleX(1);transform:scaleX(1);}
/* Sweep To Bottom */
a.hvr-sweep-to-bottom{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s;background:#e77e22;color:#fff;}
a.hvr-sweep-to-bottom:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#D56F16;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-sweep-to-bottom:hover,a.hvr-sweep-to-bottom:focus,a.hvr-sweep-to-bottom:active{color:white;}
a.hvr-sweep-to-bottom:hover:before,a.hvr-sweep-to-bottom:focus:before,a.hvr-sweep-to-bottom:active:before{-webkit-transform:scaleY(1);transform:scaleY(1);}
/* Sweep To Top */
a.hvr-sweep-to-top{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s;background:#136EAC;color:#fff;}
a.hvr-sweep-to-top:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#0C649F;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-sweep-to-top:hover,a.hvr-sweep-to-top:focus,a.hvr-sweep-to-top:active{color:white;}
a.hvr-sweep-to-top:hover:before,a.hvr-sweep-to-top:focus:before,a.hvr-sweep-to-top:active:before{-webkit-transform:scaleY(1);transform:scaleY(1);}
/* Bounce To Right */
a.hvr-bounce-to-right{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.5s;transition-duration:0.5s;background:#f2c40f;color:#fff;}
a.hvr-bounce-to-right:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#E6B806;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-bounce-to-right:hover,a.hvr-bounce-to-right:focus,a.hvr-bounce-to-right:active{color:white;}
a.hvr-bounce-to-right:hover:before,a.hvr-bounce-to-right:focus:before,a.hvr-bounce-to-right:active:before{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);}
/* Bounce To Left */
a.hvr-bounce-to-left{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.5s;transition-duration:0.5s;background:#17a086;color:#fff;}
a.hvr-bounce-to-left:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#11856F;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-bounce-to-left:hover,a.hvr-bounce-to-left:focus,a.hvr-bounce-to-left:active{color:white;}
.hvr-bounce-to-left:hover:before,a.hvr-bounce-to-left:focus:before,a.hvr-bounce-to-left:active:before{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);}
/* Bounce To Bottom */
a.hvr-bounce-to-bottom{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.5s;transition-duration:0.5s;background:#d02818;color:#fff;}
a.hvr-bounce-to-bottom:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#eb301d;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-bounce-to-bottom:hover,a.hvr-bounce-to-bottom:focus,a.hvr-bounce-to-bottom:active{color:white;}
a.hvr-bounce-to-bottom:hover:before,a.hvr-bounce-to-bottom:focus:before,a.hvr-bounce-to-bottom:active:before{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);}
/* Bounce To Top */
a.hvr-bounce-to-top{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.5s;transition-duration:0.5s;background:#93a4a4;color:#fff;}
a.hvr-bounce-to-top:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#818D8D;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-bounce-to-top:hover,a.hvr-bounce-to-top:focus,a.hvr-bounce-to-top:active{color:white;}
a.hvr-bounce-to-top:hover:before,a.hvr-bounce-to-top:focus:before,a.hvr-bounce-to-top:active:before{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);}
/* Radial Out */
a.hvr-radial-out{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden;background:#e1e1e1;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s;background:#1cbab8;color:#fff;}
a.hvr-radial-out:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#099492;border-radius:100%;-webkit-transform:scale(0);transform:scale(0);-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-radial-out:hover,a.hvr-radial-out:focus,a.hvr-radial-out:active{color:white;}
a.hvr-radial-out:hover:before,a.hvr-radial-out:focus:before,a.hvr-radial-out:active:before{-webkit-transform:scale(2);transform:scale(2);}
/* Radial In */
a.hvr-radial-in{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden;background:#d51694;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s;color:#fff;}
a.hvr-radial-in:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#AB0C75;border-radius:100%;-webkit-transform:scale(2);transform:scale(2);-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-radial-in:hover,a.hvr-radial-in:focus,a.hvr-radial-in:active{color:white;}
a.hvr-radial-in:hover:before,a.hvr-radial-in:focus:before,a.hvr-radial-in:active:before{-webkit-transform:scale(0);transform:scale(0);}
/* Rectangle In */
a.hvr-rectangle-in{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;background:#6aa84f;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s;color:#fff;}
a.hvr-rectangle-in:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#4e8735;-webkit-transform:scale(1);transform:scale(1);-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-rectangle-in:hover,a.hvr-rectangle-in:focus,a.hvr-rectangle-in:active{color:white;}
a.hvr-rectangle-in:hover:before,a.hvr-rectangle-in:focus:before,a.hvr-rectangle-in:active:before{-webkit-transform:scale(0);transform:scale(0);}
/* Rectangle Out */
a.hvr-rectangle-out{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;background:#5384b1;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s;color:#fff;}
a.hvr-rectangle-out:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#6fa8dc;-webkit-transform:scale(0);transform:scale(0);-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-rectangle-out:hover,a.hvr-rectangle-out:focus,a.hvr-rectangle-out:active{color:white;}
a.hvr-rectangle-out:hover:before,a.hvr-rectangle-out:focus:before,a.hvr-rectangle-out:active:before{-webkit-transform:scale(1);transform:scale(1);}
/* Shutter In Horizontal */
a.hvr-shutter-in-horizontal{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;background:#93940d;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s;color:#fff;}
a.hvr-shutter-in-horizontal:before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:#b8b926;-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:50%;transform-origin:50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-shutter-in-horizontal:hover,a.hvr-shutter-in-horizontal:focus,a.hvr-shutter-in-horizontal:active{color:white;}
a.hvr-shutter-in-horizontal:hover:before,a.hvr-shutter-in-horizontal:focus:before,a.hvr-shutter-in-horizontal:active:before{-webkit-transform:scaleX(0);transform:scaleX(0);}
/* Shutter Out Horizontal */
a.hvr-shutter-out-horizontal{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s;background:#ff9900;color:#fff;}
a.hvr-shutter-out-horizontal:before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:#ed9005;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:50%;transform-origin:50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-shutter-out-horizontal:hover,a.hvr-shutter-out-horizontal:focus,a.hvr-shutter-out-horizontal:active{color:white;}
a.hvr-shutter-out-horizontal:hover:before,a.hvr-shutter-out-horizontal:focus:before,a.hvr-shutter-out-horizontal:active:before{-webkit-transform:scaleX(1);transform:scaleX(1);}
/* Shutter In Vertical */
a.hvr-shutter-in-vertical{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;background:#c55e3a;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s;color:#fff;}
a.hvr-shutter-in-vertical:before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:#ff6600;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:50%;transform-origin:50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-shutter-in-vertical:hover,a.hvr-shutter-in-vertical:focus,a.hvr-shutter-in-vertical:active{color:white;}
a.hvr-shutter-in-vertical:hover:before,a.hvr-shutter-in-vertical:focus:before,a.hvr-shutter-in-vertical:active:before{-webkit-transform:scaleY(0);transform:scaleY(0);}
/* Shutter Out Vertical */
a.hvr-shutter-out-vertical{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;background:#ff339a;color:#fff;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s;}
a.hvr-shutter-out-vertical:before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:#dc0c75;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50%;transform-origin:50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-shutter-out-vertical:hover,a.hvr-shutter-out-vertical:focus,a.hvr-shutter-out-vertical:active{color:white;}
a.hvr-shutter-out-vertical:hover:before,a.hvr-shutter-out-vertical:focus:before,a.hvr-shutter-out-vertical:active:before{-webkit-transform:scaleY(1);transform:scaleY(1);}
/* BORDER TRANSITIONS */
a.button2{padding:1em;cursor:pointer;background:#eee;text-decoration:none;font-size:1.2em;color:#fff;}
ul.border-list li{display:inline-block;list-style:none;margin:1em 0;}
ul.border-list a{margin-right:8px;}
/* Border Fade */
a.hvr-border-fade{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:box-shadow;background:#38aa38;transition-property:box-shadow;box-shadow:inset 0 0 0 4px #38aa38;,0 0 1px rgba(0,0,0,0);/* Hack to improve aliasing on mobile/tablet devices */
}
a.hvr-border-fade:hover,a.hvr-border-fade:focus,a.hvr-border-fade:active{box-shadow:inset 0 0 0 4px #fff,0 0 1px rgba(0,0,0,0);/* Hack to improve aliasing on mobile/tablet devices */
}
/* Hollow */
a.hvr-hollow{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:background;transition-property:background;box-shadow:inset 0 0 0 4px #a9b3bd,0 0 1px rgba(0,0,0,0);background:#a9b3bd;/* Hack to improve aliasing on mobile/tablet devices */
}
a.hvr-hollow:hover,a.hvr-hollow:focus,a.hvr-hollow:active{background:none;}
/* Trim */
a.hvr-trim{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;background:#ff3233;}
a.hvr-trim:before{content:'';position:absolute;border:white solid 4px;top:4px;left:4px;right:4px;bottom:4px;opacity:0;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:opacity;transition-property:opacity;}
a.hvr-trim:hover:before,a.hvr-trim:focus:before,a.hvr-trim:active:before{opacity:1;}
/* Ripple Out */
@-webkit-keyframes hvr-ripple-out{100%{top:-12px;right:-12px;bottom:-12px;left:-12px;opacity:0;}
}
@keyframes hvr-ripple-out{100%{top:-12px;right:-12px;bottom:-12px;left:-12px;opacity:0;}
}
a.hvr-ripple-out{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;background:#4b78cd;}
a.hvr-ripple-out:before{content:'';position:absolute;border:#4b78cd solid 6px;top:0;right:0;bottom:0;left:0;-webkit-animation-duration:1s;animation-duration:1s;}
a.hvr-ripple-out:hover:before,a.hvr-ripple-out:focus:before,a.hvr-ripple-out:active:before{-webkit-animation-name:hvr-ripple-out;animation-name:hvr-ripple-out;}
/* Outline Out */
a.hvr-outline-out{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;background:#ff6500;}
a.hvr-outline-out:before{content:'';position:absolute;border:#ff6500 solid 4px;top:0;right:0;bottom:0;left:0;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:top,right,bottom,left;transition-property:top,right,bottom,left;}
a.hvr-outline-out:hover:before,a.hvr-outline-out:focus:before,a.hvr-outline-out:active:before{top:-8px;right:-8px;bottom:-8px;left:-8px;}
/* Outline In */
a.hvr-outline-in{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;background:#ff339a;}
a.hvr-outline-in:before{pointer-events:none;content:'';position:absolute;border:#ff339a solid 4px;top:-16px;right:-16px;bottom:-16px;left:-16px;opacity:0;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:top,right,bottom,left;transition-property:top,right,bottom,left;}
a.hvr-outline-in:hover:before,a.hvr-outline-in:focus:before,a.hvr-outline-in:active:before{top:-8px;right:-8px;bottom:-8px;left:-8px;opacity:1;}
/* Round Corners */
a.hvr-round-corners{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:border-radius;transition-property:border-radius;background:#720e9e;}
a.hvr-round-corners:hover,a.hvr-round-corners:focus,a.hvr-round-corners:active{border-radius:1em;}
/* Underline From Left */
a.hvr-underline-from-left{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden;background:#c8232c;}
a.hvr-underline-from-left:before{content:"";position:absolute;z-index:-1;left:0;right:100%;bottom:0;background:#38aa38;height:4px;-webkit-transition-property:right;transition-property:right;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-underline-from-left:hover:before,a.hvr-underline-from-left:focus:before,a.hvr-underline-from-left:active:before{right:0;}
/* Underline From Center */
a.hvr-underline-from-center{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden;}
a.hvr-underline-from-center:before{content:"";position:absolute;z-index:-1;left:50%;right:50%;bottom:0;background:#2098d1;height:4px;-webkit-transition-property:left,right;transition-property:left,right;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-underline-from-center:hover:before,a.hvr-underline-from-center:focus:before,a.hvr-underline-from-center:active:before{left:0;right:0;}
/* Underline From Right */
a.hvr-underline-from-right{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden;background:#34526f;}
a.hvr-underline-from-right:before{content:"";position:absolute;z-index:-1;left:100%;right:0;bottom:0;height:4px;-webkit-transition-property:left;transition-property:left;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:#c8232c;}
a.hvr-underline-from-right:hover:before,a.hvr-underline-from-right:focus:before,a.hvr-underline-from-right:active:before{left:0;}
/* Overline From Left */
a.hvr-overline-from-left{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden;background:#b41494;}
a.hvr-overline-from-left:before{content:"";position:absolute;z-index:-1;left:0;right:100%;top:0;background:#2098d1;height:4px;-webkit-transition-property:right;transition-property:right;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-overline-from-left:hover:before,a.hvr-overline-from-left:focus:before,a.hvr-overline-from-left:active:before{right:0;}
/* Overline From Center */
a.hvr-overline-from-center{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden;background:#fc4f08;}
a.hvr-overline-from-center:before{content:"";position:absolute;z-index:-1;left:50%;right:50%;top:0;background:#2098d1;height:4px;-webkit-transition-property:left,right;transition-property:left,right;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-overline-from-center:hover:before,a.hvr-overline-from-center:focus:before,a.hvr-overline-from-center:active:before{left:0;right:0;}
/* Overline From Right */
a.hvr-overline-from-right{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden;background:#f2c40f;}
a.hvr-overline-from-right:before{content:"";position:absolute;z-index:-1;left:100%;right:0;top:0;background:#c8232c;height:4px;-webkit-transition-property:left;transition-property:left;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-overline-from-right:hover:before,a.hvr-overline-from-right:focus:before,a.hvr-overline-from-right:active:before{left:0;}
/* Reveal */
a.hvr-reveal{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden;background:#00aff0;}
a.hvr-reveal:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;bottom:0;border-color:#075876;border-style:solid;border-width:0;-webkit-transition-property:border-width;transition-property:border-width;-webkit-transition-duration:0.1s;transition-duration:0.1s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-reveal:hover:before,a.hvr-reveal:focus:before,a.hvr-reveal:active:before{-webkit-transform:translateY(0);transform:translateY(0);border-width:4px;}
/* Underline Reveal */
a.hvr-underline-reveal{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden;background:#fb8928;}
a.hvr-underline-reveal:before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;background:#c8232c;height:4px;-webkit-transform:translateY(4px);transform:translateY(4px);-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-underline-reveal:hover:before,a.hvr-underline-reveal:focus:before,a.hvr-underline-reveal:active:before{-webkit-transform:translateY(0);transform:translateY(0);}
/* Overline Reveal */
a.hvr-overline-reveal{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden;background:#2f9259;}
a.hvr-overline-reveal:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;background:#C8232C;height:4px;-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
a.hvr-overline-reveal:hover:before,a.hvr-overline-reveal:focus:before,a.hvr-overline-reveal:active:before{-webkit-transform:translateY(0);transform:translateY(0);}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
4.44 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
4.44 KB
立即下载
严勤怡珊
了解
打赏作者 鼓励作者
Html 动画效果4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章