CSS样式问题：如何做出类似定位图效果

img


如何用css写出这种动态效果？我的代码如下，效果图如下，我是自定义动画直接设置的宽高，因为我发现写tranform:scale()会放大圆的同时也会放大边框，直接设置宽高则可以使得边框半径保持不变，但是设置宽高怎么设置放大的中心点呢？

img

img

img

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7479638
  • 除此之外, 这篇博客: CSS语法规则中的 缩放scale() 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    transform的属性值为scale()时，可以实现元素的缩放。

    值说明
    scale(x,y)x,y分别表示为改变元素的宽度和高度的倍数
    scale(n)只有一个值，表示宽度和高度同时缩放n倍
    scaleX(n)改变元素的宽度
    scaleY(n)改变元素的高度

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

由此得到结论：transform属性的所有属性值有顺序，必须连着写，一次性写完，不同的属性值之间用英文逗号隔开


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes wave {  
          0% {  
            transform: scale(0);
            opacity:1
          }  
          100% {  
            transform: scale(1);
            opacity:0
          }  
        }  
          
        .wave {
          margin: 100px;
          width: 100px;  
          height: 100px;  
          border: 8px solid #0e7cff;
          border-radius: 50%;  
          animation: wave 1s infinite linear;  
          opacity: 0;
          position: absolute;
        }
    </style>
</head>
<body>
    <div class="wave"></div>
    <div class="wave" style="animation-delay:.5s"></div>
</body>
</html>