CSS3 制作一个边框向周围散开的按钮效果

当前位置 : 首页 > 网页制作 > CSS > CSS3 制作一个边框向周围散开的按钮效果

CSS3 制作一个边框向周围散开的按钮效果

来源: 作者: 时间:2016-01-25 10:02
我们将要达到的是如下的效果(若效果未出现请刷新):分析主要还是运用CSS3的transition, animation, transform还有渐变背景等特性。由于按钮在鼠标进入时有不同的样式,所以要对其:hover状态运
我们将要达到的是如下的效果(若效果未出现请刷新):
 
 
 
分析
 
主要还是运用3的transition, animation, transform还有渐变背景等特性。
 
由于按钮在鼠标进入时有不同的样式,所以要对其:hover状态运用另外的背景样式
通过对按钮的:after状态添加一个内容为空的元素,并给其一个边框,这样在鼠标进入后我们让这个隐藏的空元素变大直到淡出,就得到我们看到的效果了
 
 
构建基本按钮样式
 
做为例子,我们的页面会很简单,就放一个a标签作为按钮,然后对其写样式让它看起来更像一个按钮。并定义好:after元素。
 
<style type="text/css">
    .button{
cursor: pointer;
text-decoration: none;
padding: 10px;
color: #fff;
border-radius: 10px;
position: absolute;
top: 100px;
left: 48%;
background: linear-gradient(#93c, #50c);
border:1px solid purple;
    }
    .button:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
opacity: 0;
border:1px solid purple;
    }
    .button:hover{
    background: linear-gradient(#b5e, #93c);
    }
</style>
<body>
    <a class="button" href="javascript:void(0);" >Fake Button</a>
</body>
添加动画
 
首先用keyframes定义动画
 
@-webkit-keyframes boom {
0% {
opacity: 0
}
5% {
opacity: 1
}
100% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
opacity: 0
}
}
@keyframes boom {
0% {
opacity: 0
}
5% {
opacity: 1
}
100% {
transform: scale(1.3);
transform: scale(1.3);
opacity: 0
}
}
 
 
再将其运用到按钮后面隐藏的元素上
 
 .button:hover:after {
     -webkit-animation: boom 0.5s ease;
     animation: boom 0.5s ease;
}
Tag:
网友评论

<