android 辐射动画_【骚气的动效】外发光动画、向外辐射动画效果，通常用于地图上面某一个扩散点效果...

/* 外发光动画、向外辐射动画效果 */

$orangeColor: rgba(251, 193, 105, 0.6);

%out-glow {

&:before,

&:after {

background-color: $orangeColor;

width: 70px;

height: 70px;

content: "";

position: absolute;

pointer-events: none;

z-index: -1;

border-radius: 100%;

margin: auto;

top: 0;

left: 0;

right: 0;

bottom: 0;

opacity: 0;

animation: out-glow 1.5s infinite ease-out;

-moz-animation: out-glow 1.5s infinite ease-out;

/* Firefox */

-webkit-animation: out-glow 1.5s infinite ease-out;

/* Safari 和 Chrome */

-o-animation: out-glow 1.5s infinite ease-out;

/* Opera */

animation-fill-mode: both;

/*动画播放到最后一帧或者倒放到第一帧停止*/

-webkit-animation-fill-mode: both;

/* Safari 和 Chrome */

}

&:after {

animation: out-glow 2.5s infinite ease-out;

-moz-animation: out-glow 2.5s infinite ease-out;

/* Firefox */

-webkit-animation: out-glow 2.5s infinite ease-out;

/* Safari 和 Chrome */

-o-animation: out-glow 2.5s infinite ease-out;

/* Opera */

-ms-animation: out-glow 2.5s infinite ease-out;

}

@keyframes out-glow {

0% {

opacity: 0;

transform: scale(0);

}

50% {

opacity: 1;

}

100% {

opacity: 0;

transform: scale(1.5);

}

}

@-moz-keyframes out-glow {

0% {

opacity: 0;

-moz-transform: scale(0);

}

50% {

opacity: 1;

}

100% {

opacity: 0;

-moz-transform: scale(1.5);

}

}

@-webkit-keyframes out-glow {

0% {

opacity: 0;

-webkit-transform: scale(0);

}

50% {

opacity: 1;

}

100% {

opacity: 0;

-webkit-transform: scale(1.5);

}

}

@-o-keyframes out-glow {

0% {

opacity: 0;

-o-transform: scale(0);

}

50% {

opacity: 1;

}

100% {

opacity: 0;

-o-transform: scale(1.5);

}

}

@-ms-keyframes out-glow {

0% {

opacity: 0;

-ms-transform: scale(0);

}

50% {

opacity: 1;

}

100% {

opacity: 0;

-ms-transform: scale(1.5);

}

}

}

本文地址：https://blog.csdn.net/qq_37860634/article/details/107375410

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！