?

?

第一種：兩輪外發(fā)光疊加，第二輪外發(fā)光結(jié)束后再出現(xiàn)第一輪

/* 外發(fā)光動(dòng)畫、向外輻射動(dòng)畫效果 */$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;/*動(dòng)畫播放到最后一幀或者倒放到第一幀停止*/-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);}}
}

第二種：兩輪外發(fā)光50%交替疊加，永遠(yuǎn)循環(huán)分不清第一輪第二輪，依次疊加

/*騷氣的紅色外發(fā)光----------------------------------------------------------------*/&:before,&:after {/*父元素需要position: relative;*/content: "";position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;/*width: 30px;*//*height: 30px;*/background: $red;border-radius: 5px;animation: sg-red-animate 1s ease-out infinite;pointer-events: none;}&:after {animation: sg-red-animate 1s ease-out 0.5s infinite;}@keyframes sg-red-animate {0% {transform: scale(1);}30% {transform: scale(5);opacity: 0.8;}100% {transform: scale(10);opacity: 0;}}

總結(jié)

以上是生活随笔為你收集整理的【骚气的动效】外发光涟漪波纹动画、向外辐射动画效果，通常用于地图上面某一个扩散点效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。