按钮放大动画效果

 1     <style type="text/css">
 2         .clicksign {
 3             display: block;
 4             position: absolute;
 5             left: 0;
 6             top: 0;
 7             border-radius: 50%;
 8             opacity: .8;
 9             background: red;
10             background-size: 100%;
11             -webkit-animation: scaleSize 1s linear infinite alternate;
12             -o-animation: scaleSize 1s linear infinite alternate;
13             animation: scaleSize .5s linear infinite alternate;
14         }
15         @keyframes scaleSize {
16             0% {
17                 width: 40px;
18                 height: 40px;
19                 transform: translate(0);
20             }
21             100% {
22                 width: 30px;
23                 height: 30px;
24                 -webkit-transform: translateY(4px);
25                 -moz-transform: translateY(4px);
26                 -ms-transform: translateY(4px);
27                 -o-transform: translateY(4px);
28                 transform: translateY(4px);
29                 font-size: 30px;
30             }
31         }
32     </style>

 

转载于:https://www.cnblogs.com/pjl43/p/8980654.html