我們將要達到的是如下的效果(若效果未出現請刷新)：
分析
主要還是運用CSS3的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;
}
擴展
另外，我還發現一個jQuery插件jQuery.twinkle專門做這樣的效果，因為是通過js做的，所以原理跟上面的完全不一樣，但這個插件提供的效果豐富，且很炫很有創意，大家可以去欣賞下。下面是一個效果的截圖。
代碼下載
度娘盤：http://pan.baidu.com/s/1kT7c8gJ
REFERENCE
- A working button on CodePen: https://codepen.io/signup/plans/
- A collection of the shining effect by using a jQuery plugin : http://larsjung.de/twinkle/
- jQuery twinkle plugin: http://larsjung.de/twinkle/