97se亚洲国产综合在线,99视频30精品视频在线观看

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

使用CSS3點擊按鈕實現(xiàn)背景漸變動畫的效果

不言

發(fā)布： 2018-06-14 17:22:48

原創(chuàng)

2872人瀏覽過

這篇文章給大家介紹的是，利用css3實現(xiàn)當(dāng)點擊按鈕的時候，按鈕的背景是漸變動畫的效果，實現(xiàn)后的效果非常好，開發(fā)的時候利用這種效果的按鈕會給用戶一種非常酷炫的感受，感興趣的朋友們下面來一起看看吧。

效果圖如下：

實例代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>css3給按鈕添加背景漸變動畫</title>
<!--
@author：SM
        @email:sm0210@qq.com
@desc：
        css3給按鈕添加背景漸變動畫
-->
<style type="text/css">
button {
color:#FFF;
font-size:16px;
outline:none;
width:300px;
height:48px;
background:#26A1D9;
border:none;
-webkit-border-radius:5px;
border-radius:5px;
}
button:active{
outline:none;
background:#208FC1;
/*執(zhí)行動畫*/
-webkit-animation:showBtn 0.5s 1;
animation:showBtn 0.5s 1;
/*停止在最后一幀*/
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
/*
定義動畫
*/
@-webkit-keyframes showBtn{</p>
<p>10%{
background:-webkit-radial-gradient(Circle,#1E7AA5 28%, #2287B7 30%, #2287B7 48%,#208FC1 60%); 
background:radial-gradient(Circle,#1E7AA5 28%, #2287B7 30%, #2287B7 48%,#208FC1 60%); 
}</p>
<p>20%{
background:-webkit-radial-gradient(Circle,#1E7AA5 32%, #2287B7 34%, #2287B7 52%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 32%, #2287B7 34%, #2287B7 52%,#208FC1 60%); 
}</p>
<p>40%{
background:-webkit-radial-gradient(Circle,#1E7AA5 34%, #2287B7 36%, #2287B7 54%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 34%, #2287B7 36%, #2287B7 54%,#208FC1 60%);
}</p>
<p>60%{
background:-webkit-radial-gradient(Circle,#1E7AA5 36%, #2287B7 38%, #2287B7 56%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 36%, #2287B7 38%, #2287B7 56%,#208FC1 60%);
}</p>
<p>80%{
background:-webkit-radial-gradient(Circle,#1E7AA5 38%, #2287B7 40%, #2287B7 58%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 38%, #2287B7 40%, #2287B7 58%,#208FC1 60%);
}</p>
<p>100%{
background:-webkit-radial-gradient(Circle,#1E7AA5 40%, #2287B7 42%, #2287B7 60%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 40%, #2287B7 42%, #2287B7 60%,#208FC1 60%);
}
}
</style>
</head>
<body>
<button>按鈕</button></p>
<p></body>
</html>

登錄后復(fù)制

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！

相關(guān)推薦：

立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；

使用css如何讓背景圖片拉伸填充避免重復(fù)顯示

CSS3的圖層陰影和文字陰影的使用

用CSS3實現(xiàn)圖片翻轉(zhuǎn)效果

以上就是使用CSS3點擊按鈕實現(xiàn)背景漸變動畫的效果的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！