纯CSS坐标点缩放闪烁，从中心向四周扩散的效果

前端技术营

于 2024-09-27 13:30:00 发布

阅读量186

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_39327418/article/details/142306841

版权

原文地址：原文连接

<template>
 <div class="box">
      <div class="dot dot1"></div>
      <div class="dot dot2"></div>
      <div class="dot dot3"></div>
      <div class="dot dot4"></div>
  </div>
</template>

<style lang="scss">
.box {
    position: relative;
    background-image: url(../../assets/map.jpeg);
    width: 1000px;
    height: 800px;
    background-size: 1000px 700px;
    background-repeat: no-repeat;
}

.dot {
    position: absolute;
    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }
    &::before {
        animation: amplify1 2s infinite;
    }
    &::after {
        animation: amplify2 2s infinite;
    }
}

.dot1 {
    top: 26%;
    left: 74%;
    background-color: darkred;
    &::before,
    &::after {
        background-color: darkred;
    }
}

.dot2 {
    top: 71%; 
    left: 73%; 
    background-color: green;
    &::before,
    &::after {
        background-color: green;
    }
}
.dot3 {
    top: 62%; 
    left:56%;
    background-color: blue;
    &::before,
    &::after {
        background-color: blue;
    }
}
.dot4 {
    top: 40%; 
    left: 36%;
    background-color: rebeccapurple;
    &::before,
    &::after {
        background-color: rebeccapurple;
    }
}

@keyframes amplify1 {
    0% {
        transform: scale(1);
        opacity: .9
    }

    100% {
        transform: scale(6);
        opacity: 0;
    }
}

@keyframes amplify2 {
    0% {
        transform: scale(1);
        opacity: .9;
    }

    100% {
        transform: scale(12);
        opacity: 0;
    }
}
</style>