css3实现动画按钮特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3实现动画按钮特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
	<title>css3实现动画按钮</title>
	<link rel="stylesheet" type="text/css" href="main.css" />
	<link href='arvo.css' rel='stylesheet' type='text/css'>
	<link href='droid.css' rel='stylesheet' type='text/css'>
</head>
<body>
	
	<div id="pagewrapper">
	 	<nav>
			<ul class="menu">
				<li class="selected"><a class="dashboard" href="#">
					<div>
						<div></div><div></div><div></div>
					</div>
					DASHBOARD
				</a></li>
				<li><a class="progress" href="#">
					<div>
						<div></div><div></div><div></div>
					</div>
					PROGRESS
				</a></li>
				<li><a class="analytics" href="#">
					<div>
						<div></div><div></div><div></div>
					</div>
					ANALYTICS
				</a></li>
				<li><a class="settings" href="#">
					<div>
						<div></div><div></div><div></div>
					</div>
					SETTINGS
				</a></li>
				<li><a class="exit" href="#">
					<div>
						<div></div><div></div><div></div>
					</div>
					EXIT
				</a></li>
			</ul>
		</nav>
	</div>
</body>
</html>

CSS代码(arvo.css):

@font-face{font-family:'Arvo';font-style:normal;font-weight:400;src:local('Arvo'),url(http://themes.googleusercontent.com/static/fonts/arvo/v5/WJ6D195CfbTRlIs49IbkFw.woff) format('woff');}

CSS代码(main.css):

@IMPORT url('dashboard.css');@IMPORT url('progress.css');@IMPORT url('analytics.css');@IMPORT url('settings.css');@IMPORT url('exit.css');html,body{margin:0;padding:0;}
body{font-family:'Helvetica Neue',Helvetica,Arial,sans;font-size:12pt;line-height:1.4em;background-color:lightsteelblue;background-image:-webkit-gradient( linear,left bottom,left top,color-stop(0,lightsteelblue),color-stop(1,steelblue));background-image:-moz-linear-gradient( center bottom,lightsteelblue 0%,steelblue 100%);background-repeat:no-repeat;}
h2,h3,h4{color:steelblue;}
#pagewrapper{width:48em;padding:0 2em 4em;margin:0 auto 2em;background:white;border-radius:0 0 2em 2em;}
header h1{font-size:5em;line-height:0.9em;letter-spacing:-0.05em;margin:0;}
code{letter-spacing:-0.05em;color:steelblue;}
pre{padding:1em;border:2px solid lightsteelblue;border-radius:0.5em;}
a:link,a:visited,a:hover,a:active,a:focus{color:orangered;font-weight:bold;}
a:hover,a:active,a:focus{color:orange;}
li{padding-bottom:0.5em;}
.menu{list-style-image:none;margin:0;padding:2em 0;}
.menu li{display:inline-block;width:150px;position:relative;}
.menu li a{display:block;text-align:center;padding:0.5em 0.5em 1em;border-radius:0.5em;text-decoration:none;color:black;cursor:pointer;}
.menu li.selected a{background:lightsteelblue;}
.menu li a:hover{background:gold;}
.menu li a > div{margin:10px auto 20px;}
.dashboard,.progress,.analytics,.settings,.exit{display:block;text-align:center;}
.dashboard > div,.progress > div,.analytics > div,.settings > div,.exit > div{display:block;height:3.6em;width:4.8em;margin:0 auto;}
.image{display:block;text-align:center;background:#E0E0E0;margin:1em 0;border-radius:0.5em;}
.image .dashboard,.image .progress,.image .analytics,.image .settings,.image .exit{margin:1em 1em 0em;display:inline-block;}
.image p{padding-bottom:0.5em;}

附件:下载该文件资源,减少时间成本(增值服务)