效果展示

微信小程序--粘性小球.gif

Demo代码

wxml

 <view class="container">
   <view class="big">
    <view class="middle"></view>
    <view class="small"></view>
   </view>
  </view>

wxss

page {
  margin : 0;
  padding: 0;
  background-color:#2c3e50;
  display         : flex;
  justify-content : center;
  align-items     : center;
}

.big {
  position        : relative;
  width           : 340px;
  height          : 340px;
  background-color: #fff;
  border-radius   : 50%;
  display        : flex;
  justify-content: center;
  align-items    : center;
  filter: contrast(1000%);
}

.middle {
  position        : absolute;
  width           : 140px;
  height          : 140px;
  background-color: #000;
  border-radius   : 50%;
  filter          : blur(5px);
}

.small {
  position        : absolute;
  width           : 80px;
  height          : 80px;
  background-color: #f00;
  border-radius   : 50%;
  filter          : blur(5px);
  animation       : move 4s ease-in-out infinite both;
}

@keyframes move {
  0% {
      transform: translateX(-120px);
  }

  10% {
      width : 80px;
      height: 80px;
  }

  17.5% {
      width : 70px;
      height: 100px;
  }

  20% {
      width : 80px;
      height: 80px;
  }

  27.5% {
      width : 80px;
      height: 80px;
  }

  32.5% {
      width : 100px;
      height: 70px;
  }

  37.5% {
      width : 80px;
      height: 80px;
  }

  50% {
      transform: translateX(120px);
  }

  60% {
      width : 80px;
      height: 80px;
  }

  67.5% {
      width : 70px;
      height: 100px;
  }

  70% {
      width : 80px;
      height: 80px;
  }

  77.5% {
      width : 80px;
      height: 80px;
  }

  82.5% {
      width : 100px;
      height: 70px;
  }

  87.5% {
      width : 80px;
      height: 80px;
  }

  100% {
      transform: translateX(-120px);
  }
}

学习于: https://www.bilibili.com/video/BV1bi4y1L7Yt?t=20
在原基础上进行了改动