CSS3实现酷炫动画按钮特效

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

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

以下是 CSS3实现酷炫动画按钮特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<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>CSS3实现酷炫动画按钮特效</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="htmleaf-container">
	<div class="htmleaf-content bgcolor-3">
		<h4 class="intro">这个提交按钮效果有两组动画：当屏幕大于800px的时候是一个动画效果，当屏幕小于800像素的时候是另一种动画效果。缩放你的浏览器看看不同的提交按钮动画效果吧！</h4>
		<button>
			<img class="splash" src="images/watersplash_3.svg" alt="Splash!" />
			<img class="splash splash-2" src="images/watersplash_3.svg" alt="Splash!" />
			<img class="sub" src="images/sublogo_16.svg" class="Submarine" />
			<img class="submerge" src="images/submerge.svg" alt="Water" />
			<span class="main-text"> <span class="submit">Sub</span>mit </span> <span class="sent-text"> <span class="sent">Sent!</span> </span>
		</button>
	</div>
</div>
<script src='js/jquery.min.js'></script> 
<script type="text/javascript">
$(function(){
button = $('button');

button.click(function(e) {
e.preventDefault();
$(this).toggleClass('active');
});

$(window).resize(function(e) {
button.removeClass('active');
});
});
</script>
</body>
</html>

CSS代码(style.css):

.intro{position:relative;margin:50px auto;color:#458ecc;width:600px;font:16px/26px "微软雅黑";}
button{position:relative;display:block;margin:65px auto;text-decoration:none;text-align:center;text-shadow:2px 2px 2px #3a7faa;box-shadow:0px 9px 0px #3a7faa,0px 9px 25px rgba(0,0,0,0.7);transition:all .1s ease;-webkit-transition:all .1s ease;color:white;background-color:#458ecc;border-radius:8px;border:none;outline:0 none;width:250px;height:80px;overflow:hidden;cursor:pointer;font:bold 28px/65px Arial;}
button:active{box-shadow:0px 3px 0px #3a7faa,0px 3px 6px rgba(0,0,0,0.9);top:6px;}
.main-text{position:absolute;left:110px;}
.submit{text-transform:uppercase;color:#efd959;}
.sent-text{position:absolute;left:40px;opacity:0;}
button.active .main-text{display:none;}
button.active .sent-text{animation:sent 4s forwards;animation-delay:4s;-webkit-animation:sent 4s forwards;-webkit-animation-delay:4s;}
.sub{float:left;padding:0 0 0 10px;width:65px;height:65px;}
button.active .sub{animation:drive 3s forwards;animation-delay:2s;-webkit-animation:drive 3s forwards;-webkit-animation-delay:2s;}
.splash{float:left;margin-left:30px;margin-top:-40px;transform:rotate(-10deg);-webkit-transform:rotate(-10deg);opacity:0;}
.splash-2{float:right;margin-right:30px;transform:rotate(10deg);-webkit-transform:rotate(10deg);}
.submerge{position:absolute;top:80px;border-radius:0 0 10px 10px;left:0;opacity:.7;}
button.active .submerge{animation:submerge 2s forwards;-webkit-animation:submerge 2s forwards;}
.return{position:relative;display:block;margin:auto;font-family:'Lato',sans-serif;font-size:22px;text-align:center;border:2px solid #8ec6ef;padding:0 15px;text-decoration:none;line-height:40px;color:#8ec6ef;width:150px;height:40px;}
.return:hover{color:#458ecc;border:2px solid #458ecc;}
@keyframes submerge{to{transform:translateY(-50px);}
}
@keyframes drive{to{transform:translateX(140px);}
}
@keyframes sent{to{opacity:1;}
}
@-webkit-keyframes submerge{to{-webkit-transform:translateY(-50px);}
}
@-webkit-keyframes drive{to{-webkit-transform:translateX(140px);}
}
@-webkit-keyframes sent{to{opacity:1;}
}
@keyframes jump{25%{transform:translateY(-90px) rotate(-40deg);}
75%{transform:translateY(-90px) translateX(150px) rotate(40deg);}
100%{transform:translateY(0) translateX(150px);}
}
@keyframes water-splash{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@-webkit-keyframes jump{25%{-webkit-transform:translateY(-90px) rotate(-40deg);}
75%{-webkit-transform:translateY(-90px) translateX(150px) rotate(40deg);}
100%{-webkit-transform:translateY(0) translateX(150px);}
}
@-webkit-keyframes water-splash{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@media (min-width:800px){button{overflow:visible;}
.submerge{display:none;}
button.active .sub{animation:jump 4s forwards;}
button.active .splash{animation:water-splash 3s forwards;}
button.active .splash-2{animation-delay:3s;}
button.active .sub{-webkit-animation:jump 4s forwards;}
button.active .splash{-webkit-animation:water-splash 3s forwards;}
button.active .splash-2{-webkit-animation-delay:3s;}
}

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