<div class="uc-icon">
<a target="_blank" href="share.html" class="iconfont icon-gift-fill swing animated infinite "></a>
</div>
/* 动画 */
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg)
}
40% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg)
}
60% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg)
}
80% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg)
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
}
@keyframes swing {
20% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg)
}
40% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg)
}
60% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg)
}
80% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg)
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
}
.swing {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-name: swing;
animation-name: swing
}
@-webkit-keyframes bounce {
0%,20%,53%,80%,to {
-webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
animation-timing-function: cubic-bezier(.215,.61,.355,1);
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
40%,43% {
-webkit-transform: translate3d(0,-5px,0);
transform: translate3d(0,-5px,0)
}
40%,43%,70% {
-webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
animation-timing-function: cubic-bezier(.755,.05,.855,.06)
}
70% {
-webkit-transform: translate3d(0,-2px,0);
transform: translate3d(0,-2px,0)
}
90% {
-webkit-transform: translate3d(0,-2px,0);
transform: translate3d(0,-2px,0)
}
}
@keyframes bounce {
0%,20%,53%,80%,to {
-webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
animation-timing-function: cubic-bezier(.215,.61,.355,1);
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
40%,43% {
-webkit-transform: translate3d(0,-5px,0);
transform: translate3d(0,-5px,0)
}
40%,43%,70% {
-webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
animation-timing-function: cubic-bezier(.755,.05,.855,.06)
}
70% {
-webkit-transform: translate3d(0,-2px,0);
transform: translate3d(0,-2px,0)
}
90% {
-webkit-transform: translate3d(0,-2px,0);
transform: translate3d(0,-2px,0)
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
10%,20% {
-webkit-transform: scale3d(.9,.9,.9) rotate(-3deg);
transform: scale3d(.9,.9,.9) rotate(-3deg)
}
30%,50%,70%,90% {
-webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg);
transform: scale3d(1.1,1.1,1.1) rotate(3deg)
}
40%,60%,80% {
-webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg);
transform: scale3d(1.1,1.1,1.1) rotate(-3deg)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@keyframes tada {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
10%,20% {
-webkit-transform: scale3d(.9,.9,.9) rotate(-3deg);
transform: scale3d(.9,.9,.9) rotate(-3deg)
}
30%,50%,70%,90% {
-webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg);
transform: scale3d(1.1,1.1,1.1) rotate(3deg)
}
40%,60%,80% {
-webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg);
transform: scale3d(1.1,1.1,1.1) rotate(-3deg)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada
}
@-webkit-keyframes wobble {
0% {
-webkit-transform: none;
transform: none
}
15% {
-webkit-transform: translate3d(-25%,0,0) rotate(-5deg);
transform: translate3d(-25%,0,0) rotate(-5deg)
}
30% {
-webkit-transform: translate3d(20%,0,0) rotate(3deg);
transform: translate3d(20%,0,0) rotate(3deg)
}
45% {
-webkit-transform: translate3d(-15%,0,0) rotate(-3deg);
transform: translate3d(-15%,0,0) rotate(-3deg)
}
60% {
-webkit-transform: translate3d(10%,0,0) rotate(2deg);
transform: translate3d(10%,0,0) rotate(2deg)
}
75% {
-webkit-transform: translate3d(-5%,0,0) rotate(-1deg);
transform: translate3d(-5%,0,0) rotate(-1deg)
}
to {
-webkit-transform: none;
transform: none
}
}
@keyframes wobble {
0% {
-webkit-transform: none;
transform: none
}
15% {
-webkit-transform: translate3d(-25%,0,0) rotate(-5deg);
transform: translate3d(-25%,0,0) rotate(-5deg)
}
30% {
-webkit-transform: translate3d(20%,0,0) rotate(3deg);
transform: translate3d(20%,0,0) rotate(3deg)
}
45% {
-webkit-transform: translate3d(-15%,0,0) rotate(-3deg);
transform: translate3d(-15%,0,0) rotate(-3deg)
}
60% {
-webkit-transform: translate3d(10%,0,0) rotate(2deg);
transform: translate3d(10%,0,0) rotate(2deg)
}
75% {
-webkit-transform: translate3d(-5%,0,0) rotate(-1deg);
transform: translate3d(-5%,0,0) rotate(-1deg)
}
to {
-webkit-transform: none;
transform: none
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble
}