css3实现类似地图定位循环扩散光圈效果
为了实现这种效果,我们可以使用CSS3的动画和圆形边框来创建一个光环效果,并通过CSS变量共享颜色和动画时长。以下是一个简单的实现示例:
HTML:
<div class="map-marker"></div>
CSS:
:root {
--duration: 2s;
--color: #FFD255; /* 光环颜色 */
}
.map-marker {
width: 100px;
height: 100px;
background-color: #333; /* 地图标记颜色 */
border-radius: 50%; /* 圆形地图标记 */
position: relative;
animation: pulse var(--duration) infinite alternate;
}
.map-marker::before,
.map-marker::after {
content: '';
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
background-color: var(--color);
opacity: 0;
animation: pulse-ring var(--duration) infinite alternate;
}
.map-marker::before {
animation-delay: calc(var(--duration) / 2);
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}
@keyframes pulse-ring {
0%, 100% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.5);
}
}
这段代码会创建一个圆形的地图标记,并在其中心位置显示一个光环,光环会不停地扩张和收缩,模拟出一种类似于地图上的定位循环扩散光圈的效果。通过CSS变量,我们可以轻松地调整光环的颜色和动画时长。
评论已关闭