撸一个css定位动画

先上效果图

 

布局解析：

背景和文字就没啥好说的了，直接说关键部分

1.图标绘制  class  命名为  icon_local

 

 

 看起来很复杂其实很简单 首先咱们画个正方形然后旋转45度

 

 

 

  width: 60rpx;
  height: 60rpx;
  background: #89849b;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;

 

 

 

接下来让它变成小气球的样子 只要设置border-radius即可

 

 

 

transform: rotate(-45deg);

 

 

然后给它中心加个小圆圈  这里用css的伪元素 after

由于我们上边设置了 flex布局 并且让内容全居中了就不用管小圆圈位置问题了

 

 

.icon_local:after 

  content: '';
  width: 26rpx;
  height: 26rpx;
  background: #2f2f2f;
  border-radius: 50%;

 

小小的图标就完成了，接下来是下边的波纹动画

 

 

这个动画其实也是用了旋转 只不过是3D的

首先画一个小圆圈作为定位图标的阴影

命名类名为  .shadow

 

 

  border-radius: 50%;
  height: 28rpx;
  width: 28rpx;
  z-index: -2;  /*放到icon底下*/

 

 

接下来是波纹动画  

先画一个圆 白色边框  这里用的是 box-shadow来完成  依然用伪元素 after

 

 

.shadow:after

  content: "";
  border-radius: 50%;
  height: 80rpx;
  width: 80rpx;
  position: absolute;
  margin: -26rpx 0 0 -26rpx;
  opacity: 1;
  box-shadow: 0 0 2rpx 4rpx #89849b;

 

 

动画  逻辑是先缩小、透明度为0 然后到50%的时候透明度设置为1 到100%时 放大1.2倍透明度为0

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
  }

  50% {
    opacity: 1;
    filter: none;
  }

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

 

 

加上动画 看效果

 

.shadow:after

  content: "";
  border-radius: 50%;
  height: 80rpx;
  width: 80rpx;
  position: absolute;
  margin: -26rpx 0 0 -26rpx;
  opacity: 0;
  box-shadow: 0 0 2rpx 4rpx #89849b;
 /*加上动画*/
  animation-delay: 1.1s;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;

 

最后我们通过旋转来完成最终效果

.shadow

  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  height: 28rpx;
  width: 28rpx;
  z-index: -2;
  /*旋转*/
  transform: rotateX(55deg);

 

 

完--

 

来源：https://www.cnblogs.com/Leesttee/p/11753744.html