CSS无尽的走廊动画

下载代码

html

css

分享到微信朋友圈

html

css

div {
  width: 300px;
  height: 300px;
  -webkit-animation: animate 600ms infinite linear;
          animation: animate 600ms infinite linear;
}
@media (prefers-reduced-motion) {
  div {
    -webkit-animation: none;
            animation: none;
  }
}
body {
  height: 100vh;
  display: grid;
  place-content: center;
  background-color: #ff6347;
}
@-webkit-keyframes animate {
  from {
    box-shadow: inset 0 5px 10px 5px rgba(0,0,0,0.3), inset 0 0 0 0 #ff6347, inset 0 5px 10px 5px rgba(0,0,0,0), inset 0 0 0 20px #ff6347, inset 0 5px 10px 25px rgba(0,0,0,0.3), inset 0 0 0 40px #ff6347, inset 0 5px 10px 45px rgba(0,0,0,0.3), inset 0 0 0 60px #ff6347, inset 0 5px 10px 65px rgba(0,0,0,0.3), inset 0 0 0 80px #ff6347, inset 0 5px 10px 85px rgba(0,0,0,0.3), inset 0 0 0 100px #ff6347, inset 0 5px 10px 105px rgba(0,0,0,0.3), inset 0 0 0 120px #ff6347, inset 0 5px 10px 125px rgba(0,0,0,0.3), inset 0 0 0 140px #ff6347, inset 0 5px 10px 145px rgba(0,0,0,0.3), inset 0 0 0 160px #ff6347;
  }
  to {
    box-shadow: inset 0 5px 10px 5px rgba(0,0,0,0.3), inset 0 0 0 20px #ff6347, inset 0 5px 10px 25px rgba(0,0,0,0.3), inset 0 0 0 40px #ff6347, inset 0 5px 10px 45px rgba(0,0,0,0.3), inset 0 0 0 60px #ff6347, inset 0 5px 10px 65px rgba(0,0,0,0.3), inset 0 0 0 80px #ff6347, inset 0 5px 10px 85px rgba(0,0,0,0.3), inset 0 0 0 100px #ff6347, inset 0 5px 10px 105px rgba(0,0,0,0.3), inset 0 0 0 120px #ff6347, inset 0 5px 10px 125px rgba(0,0,0,0.3), inset 0 0 0 140px #ff6347, inset 0 5px 10px 145px rgba(0,0,0,0.3), inset 0 0 0 160px #ff6347, inset 0 5px 10px 165px rgba(0,0,0,0.3), inset 0 0 0 180px #ff6347;
  }
}
@keyframes animate {
  from {
    box-shadow: inset 0 5px 10px 5px rgba(0,0,0,0.3), inset 0 0 0 0 #ff6347, inset 0 5px 10px 5px rgba(0,0,0,0), inset 0 0 0 20px #ff6347, inset 0 5px 10px 25px rgba(0,0,0,0.3), inset 0 0 0 40px #ff6347, inset 0 5px 10px 45px rgba(0,0,0,0.3), inset 0 0 0 60px #ff6347, inset 0 5px 10px 65px rgba(0,0,0,0.3), inset 0 0 0 80px #ff6347, inset 0 5px 10px 85px rgba(0,0,0,0.3), inset 0 0 0 100px #ff6347, inset 0 5px 10px 105px rgba(0,0,0,0.3), inset 0 0 0 120px #ff6347, inset 0 5px 10px 125px rgba(0,0,0,0.3), inset 0 0 0 140px #ff6347, inset 0 5px 10px 145px rgba(0,0,0,0.3), inset 0 0 0 160px #ff6347;
  }
  to {
    box-shadow: inset 0 5px 10px 5px rgba(0,0,0,0.3), inset 0 0 0 20px #ff6347, inset 0 5px 10px 25px rgba(0,0,0,0.3), inset 0 0 0 40px #ff6347, inset 0 5px 10px 45px rgba(0,0,0,0.3), inset 0 0 0 60px #ff6347, inset 0 5px 10px 65px rgba(0,0,0,0.3), inset 0 0 0 80px #ff6347, inset 0 5px 10px 85px rgba(0,0,0,0.3), inset 0 0 0 100px #ff6347, inset 0 5px 10px 105px rgba(0,0,0,0.3), inset 0 0 0 120px #ff6347, inset 0 5px 10px 125px rgba(0,0,0,0.3), inset 0 0 0 140px #ff6347, inset 0 5px 10px 145px rgba(0,0,0,0.3), inset 0 0 0 160px #ff6347, inset 0 5px 10px 165px rgba(0,0,0,0.3), inset 0 0 0 180px #ff6347;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg