看一下效果：

PixPin_2024-05-29_15-48-43.gif

HTML代码：


<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>CSS漩涡背景效果</title>

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <div class="bg">

      <span style="--i: 0"></span>

      <span style="--i: 1"></span>

      <span style="--i: 2"></span>

      <span style="--i: 3"></span>

      <span style="--i: 4"></span>

      <span style="--i: 5"></span>

      <span style="--i: 6"></span>

      <span style="--i: 7"></span>

      <span style="--i: 8"></span>

      <span style="--i: 9"></span>

      <span style="--i: 10"></span>

      <span style="--i: 11"></span>

    </div>

  </body>

</html>

css代码：


* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  min-height: 100vh;

  background-color: #fff;

  overflow: hidden;

  display: flex;

  justify-content: center;

  align-items: center;

}



.bg {

  position: absolute;

  width: 200vw;

  height: 200vh;

  display: flex;

  justify-content: center;

  align-items: center;

  animation: animate 10s linear infinite;

}



@keyframes animate {

  0% {

    transform: rotate(0);

  }

  100% 

  {

    transform: rotate(360deg);

  }

}



.bg span {

  position: absolute;

  width: 500px;

  height: 150vh;

  transform: translate(-50%, -50%) rotate(calc(30deg * var(--i)));

  transform-origin: bottom right;

}



.bg span::before {

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  border-bottom-left-radius: 500px;

  box-shadow: -90px -90px 0 89.20px #ff0954;

}



.bg span:nth-child(even)::before {

  box-shadow: -90px -90px 0 89.20px #3c4396;

}

标签: none

添加新评论