CSS3 クリックボタンで背景のグラデーションアニメーション効果を実現

レンダリングは次のとおりです:

コードの例は次のとおりです:

nbsp;html>


<meta>
<meta>
<title>css3给按钮添加背景渐变动画</title>
<!--
@author：SM
@email:sm0210@qq.com
@desc：
css3给按钮添加背景渐变动画
-->
<style>
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;
/*执行动画*/
-webkit-animation:showBtn 0.5s 1;
animation:showBtn 0.5s 1;
/*停止在最后一帧*/
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
/*
定义动画
*/
@-webkit-keyframes showBtn{ <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>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>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>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>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>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>


<button>按钮</button> <p>
</p>

概要
上記は、ボタンをクリックしたときに背景のグラデーション アニメーションの効果を実現するために CSS3 を使用するものです。興味のある友人は自分でコードを実行できます。この記事の内容が皆様の勉強や仕事に少しでもお役に立てれば幸いです。

CSS3 ボタンをクリックして背景のグラデーションアニメーション効果を実現する関連記事をさらに詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。