css3實現類似地圖定位循環(huán)擴散光圈效果(最新推薦)
發(fā)布時間：2024-05-24 16:43:22 作者：佚名 
我要評論
我要評論這篇文章主要介紹了css3實現類似地圖定位循環(huán)擴散光圈效果,本文通過實例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧
1.效果圖,重點opacity,animation,transform:scale
2.html
<div class="icon-warnCom">
<icon class="icon-warns"><i class="dot"></i><i class="pulse"></i></icon>
</div>
<div class="icon-warnCom1">
<icon class="icon-warns"><i class="dot"></i><i class="pulse"></i></icon>
</div>
<div class="icon-warnCom2">
<icon class="icon-warns"><i class="dot"></i><i class="pulse"></i></icon>
</div>3.css
body {
width: 100%;
height: 100%;
background-color: black;
}
@keyframes warn {
0% {
transform: scale(0);
opacity: 0.0;
}
25% {
transform: scale(0);
opacity: 0.1;
}
50% {
transform: scale(0.1);
opacity: 0.3;
}
75% {
transform: scale(0.2);
opacity: 0.5;
}
100% {
transform: scale(0.3);
opacity: 0.0;
}
}
.icon-warnCom {
position: absolute;
width: 12px;
height: 12px;
background-color: #ffd803;
border-radius: 100%;
top: 100px;
left: 100px;
}
.icon-warns {
position: relative;
width: 100%;
height: 100%;
display: block;
}
/* 保持大小不變的小圓圈 */
.dot {
position: absolute;
left: -44px;
top: -44px;
width: 60px;
height: 60px;
-webkit-border-radius: 100;
-moz-border-radius: 100;
border: 20px solid #f6c100;
border-radius: 100%;
z-index: 2;
opacity: 0;
-webkit-animation: warn 2.5s ease-out;
-moz-animation: warn 2.5s ease-out;
animation: warn 2.5s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* 產生動畫（向外擴散變大）的圓圈 */
.pulse {
position: absolute;
left: -44px;
top: -44px;
width: 60px;
height: 60px;
border: 20px solid #f6c100;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
z-index: 1;
opacity: 1;
-webkit-animation: warn 1.5s ease-out;
-moz-animation: warn 1.5s ease-out;
animation: warn 1.5s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.icon-warnCom1 {
position: absolute;
width: 12px;
height: 12px;
background-color: #ffd803;
border-radius: 100%;
top: 50px;
left: 50px;
}
.icon-warnCom2 {
position: absolute;
width: 12px;
height: 12px;
background-color: #ffd803;
border-radius: 100%;
top: 100px;
left: 50px;
}到此這篇關于css3實現類似地圖定位循環(huán)擴散光圈效果的文章就介紹到這了,更多相關css3地圖定位循環(huán)擴散光圈內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- 這篇文章主要為大家詳細介紹了CSS3定位和浮動的概念，以及實例代碼講解CSS3定位和浮動的使用方法，感興趣的小伙伴們可以參考一下2016-05-10