<div class="sticky-container">
   <div class="blurfield">
     <div class="ball1"></div>
     <div class="ball2"></div>
   </div>
 </div>
复制html
.sticky-container {
  background: #000;
  overflow: hidden;
  
  .blurfield {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    filter: blur(10px) contrast(30);
  }

  .ball1,
  .ball2 {
    width: 80px;
    height: 80px;
    background-color: #fff;
    position: absolute;
    animation: ball 10s infinite;
    border-radius: 100%;
  }

  .ball2 {
    animation-delay: -2s;
  }
}

@keyframes ball {
  0% {
    transform: translateX(-100px);
  }

  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(-100px);
  }
}
复制css

专注服务于开发者的平台

冀ICP备12011960号-21

FLOW Link

devland@163.com技术咨询和服务
站点地图

代码观察

欢迎关注服务号更多技术等你来看

专注服务于开发者的平台

冀ICP备12011960号-21