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

 分析


 主要还是运用CSS3的transition, animation, transform还有渐变背景等特性。

  • 由于按钮在鼠标进入时有不同的样式,所以要对其:hover状态运用另外的背景样式
  • 通过对按钮的:after状态添加一个内容为空的元素,并给其一个边框,这样在鼠标进入后我们让这个隐藏的空元素变大直到淡出,就得到我们看到的效果了

 

技术分享

 

构建基本按钮样式


 做为例子,我们的页面会很简单,就放一个a标签作为按钮,然后对其写样式让它看起来更像一个按钮。并定义好:after元素。

 1 <style type="text/css">
 2     .button{
 3     cursor: pointer;
 4     text-decoration: none;
 5     padding: 10px;
 6     color: #fff;
 7     border-radius: 10px;
 8     position: absolute;
 9     top: 100px;
10     left: 48%;
11     background: linear-gradient(#93c, #50c);
12     border:1px solid purple;
13     }
14     .button:after{
15     content: "";
16     position: absolute;
17     top: 0;
18     left: 0;
19     width: 100%;
20     height: 100%;
21     border-radius: 10px;
22     opacity: 0;
23     border:1px solid purple;
24     }
25     .button:hover{
26         background: linear-gradient(#b5e, #93c);
27     }
28 </style>
29 <body>
30     <a class="button" href="javascript:void(0);" >Fake Button</a>
31 </body>

 

添加动画


 首先用keyframes定义动画

 1 @-webkit-keyframes boom {
 2     0% {
 3         opacity: 0
 4     }
 5     5% {
 6         opacity: 1
 7     }
 8     100% {
 9         -webkit-transform: scale(1.3);
10         transform: scale(1.3);
11         opacity: 0
12     }
13 }
14 @keyframes boom {
15     0% {
16         opacity: 0
17     }
18     5% {
19         opacity: 1
20     }
21     100% {
22         transform: scale(1.3);
23         transform: scale(1.3);
24         opacity: 0
25     }
26 }

 

再将其运用到按钮后面隐藏的元素上

 .button:hover:after {
     -webkit-animation: boom 0.5s ease;
     animation: boom 0.5s ease;
}

 

扩展


 另外,我还发现一个jQuery插件jQuery.twinkle专门做这样的效果,因为是通过js做的,所以原理跟上面的完全不一样,但这个插件提供的效果丰富,且很炫很有创意,大家可以去欣赏下。下面是一个效果的截图。

 

技术分享

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。