집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3 클릭 버튼을 사용하여 배경 그라데이션 애니메이션 효과 얻기

CSS3 클릭 버튼을 사용하여 배경 그라데이션 애니메이션 효과 얻기

不言원래의: 2018-06-14 17:22:482625검색

이 기사에서는 버튼을 클릭할 때 버튼 배경에 그라데이션 애니메이션 효과를 구현하기 위해 CSS3를 사용하는 방법을 소개합니다. 개발할 때 이 효과를 사용하는 버튼은 사용자에게 매우 좋습니다. 정말 특별한 느낌이네요. 관심 있는 친구들은 꼭 오셔서 아래를 살펴보세요.

렌더링 내용은 다음과 같습니다.

예제 코드는 다음과 같습니다.

<!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;
/*执行动画*/
-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>

위 내용은 모두의 학습에 도움이 되기를 바랍니다. . 더 많은 관련 내용을 보시려면 PHP 중국어 넷을 주목해주세요!

CSS3 클릭 버튼을 사용하여 배경 그라데이션 애니메이션 효과 얻기

관련 기사