배경 그라데이션 애니메이션 효과를 얻으려면 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 중국어 웹사이트를 참고하세요!