button.gif
效果图还行吧，实现起来也不困难，都是一些基础的东西，用a标签来做按钮
html
<div class="container">
<a href="#" class="btn-mask">发射</a><!--蒙层按钮-->
<a href="#" class="btn-clip">旋转</a><!--clip动画按钮-->
</div>
css
外部容器一个相对定位
.container{
width: 400px;
height: 400px;
border: 5px solid #1E90FF;
border-radius: 10px 0 10px 0;
margin: 10px auto;
position: relative;
}
第一个按钮的样式
.btn-mask{
text-decoration: none;
position: absolute;
display: block;
line-height: 40px;
left: 50px;
top: 50px;
width: 100px;
height: 40px;
text-align: center;
background-color: #EEEEEE;
color: #333333;
overflow: hidden;
}
.btn-mask:before{
transition: top 0.2s linear;
display: block;
position: absolute;
content: "";
background-color: rgba(0,0,0,0.1);
width: 100%;
height: 100%;
top: -100%;
}
.btn-mask:hover:before{
top: 0;
}
主要是利用before元素做成一个有透明度的蒙层，然后控制top在按钮上方，hover的时候更改高度
#######！需要注意的transition效果的使用位置
第二个按钮就涉及到一个很容易被忽视的css属性clip
参考：http://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/
我理解的就是参数的起始都是以top,left为标准
例如clip:rect(0,100px,15px,0);
假设是一个100 * 100d的div盒子
里面参数的顺序还是按照顺时针，上，右，下，左
就是第二个参数100px就表示从左边开始100px的位置开始裁剪，而15px则是以top为起始位置15px的位置开始裁剪，直到bottom,而上，左参数则是只要有多少像素就从0开始裁剪多少像素
.btn-clip{
width: 90px;
height: 30px;
position: absolute;
left: 55px;
top: 160px;
text-align: center;
text-decoration: none;
line-height: 30px;
background-color: #CD5C5C;
}
/*pseudo 虚伪的，假的 */
.btn-clip:before{
content: "";
width: 94px;
height: 34px;
position: absolute;
left: 0px;
top: 0px;
margin-left: -5px;
margin-top: -5px;
border: 3px solid #FF0000;
/*box-sizing: border-box;*/
animation: clip_rotate 1.5s linear infinite;
}
@keyframes clip_rotate{
0%,100%{clip: rect(0,100px,3px,0);}
25%{clip: rect(0,100px,40px,97px);}
50%{clip: rect(37px,100px,40px,0);}
75%{clip: rect(0,3px,40px,0);}
}
