پیش‌نمایش زنده
کد HTML
<div class="container">
  <div class="box">
    <div class="cube"></div>
  </div>
</div>
کد CSS
.container {
  position: relative;
  width: 100%;
  transform: rotate(-35deg);
  background: transparent;
}
.container .box {
  position: relative;
  display: flex;
  left: -256px;
  justify-content: center;
  align-items: center;
  width: calc(100% + 400px);
  height: 160px;
  -webkit-box-reflect: below 2px linear-gradient(transparent, #2224);
  animation: animSurface 1.5s ease-in-out infinite;
}
@keyframes animSurface {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-200px);
  }
}
.container .box .cube {
  position: relative;
  width: 150px;
  height: 160px;
  border-radius: 6%;
  background: #03e9f4;
  box-shadow:
    0 0 5px rgba(3, 233, 244, 1),
    0 0 25px rgba(3, 233, 244, 1),
    0 0 50px rgba(3, 233, 244, 1),
    0 0 100px rgba(3, 233, 244, 1) 0 0 200px rgba(3, 233, 244, 0.5),
    0 0 300px rgba(3, 233, 244, 0.5);
  transform-origin: bottom right;
  animation: anim 1.5s ease-in-out infinite;
}

@keyframes anim {
  0% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(90deg);
  }
  65% {
    transform: rotate(85deg);
  }
  70% {
    transform: rotate(90deg);
  }
  75% {
    transform: rotate(87.5deg);
  }
  80%,
  100% {
    transform: rotate(90deg);
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06