當(dāng)前位置:
首頁 >
【骚气的动效】外发光涟漪波纹动画、向外辐射动画效果,通常用于地图上面某一个扩散点效果
發(fā)布時(shí)間:2023/11/27
32
豆豆
生活随笔
收集整理的這篇文章主要介紹了
【骚气的动效】外发光涟漪波纹动画、向外辐射动画效果,通常用于地图上面某一个扩散点效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
?
第一種:兩輪外發(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 解决笔记本集成声卡在某些情况下视频、语音
- 下一篇: 【骚气的动效】无限循环往下往复淡入淡出运