div+css实现s形无限循环彩色漩涡动画效果代码-html代码-BFW代码库

div+css实现s形无限循环彩色漩涡动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现s形无限循环彩色漩涡动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* {
  padding: 0;
  margin: 0;
  outline: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #140032;
}

.s {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  border-left: 10px ridge transparent;
  border-right: 10px ridge transparent;
  border-radius: 25%;
  transform: scale(0.25) rotate(0deg);
  animation: infinity 12s ease-in-out infinite;
}
.s:nth-child(1) {
  animation-delay: 0.0625s;
  border-color: #ff0020;
}
.s:nth-child(2) {
  animation-delay: 0.125s;
  border-color: #ff0040;
}
.s:nth-child(3) {
  animation-delay: 0.1875s;
  border-color: #ff0060;
}
.s:nth-child(4) {
  animation-delay: 0.25s;
  border-color: #ff0080;
}
.s:nth-child(5) {
  animation-delay: 0.3125s;
  border-color: #ff009f;
}
.s:nth-child(6) {
  animation-delay: 0.375s;
  border-color: #ff00bf;
}
.s:nth-child(7) {
  animation-delay: 0.4375s;
  border-color: #ff00df;
}
.s:nth-child(8) {
  animation-delay: 0.5s;
  border-color: fuchsia;
}
.s:nth-child(9) {
  animation-delay: 0.5625s;
  border-color: #df00ff;
}
.s:nth-child(10) {
  animation-delay: 0.625s;
  border-color: #bf00ff;
}
.s:nth-child(11) {
  animation-delay: 0.6875s;
  border-color: #9f00ff;
}
.s:nth-child(12) {
  animation-delay: 0.75s;
  border-color: #8000ff;
}
.s:nth-child(13) {
  animation-delay: 0.8125s;
  border-color: #6000ff;
}
.s:nth-child(14) {
  animation-delay: 0.875s;
  border-color: #4000ff;
}
.s:nth-child(15) {
  animation-delay: 0.9375s;
  border-color: #2000ff;
}
.s:nth-child(16) {
  animation-delay: 1s;
  border-color: blue;
}
.s:nth-child(17) {
  animation-delay: 1.0625s;
  border-color: #0020ff;
}
.s:nth-child(18) {
  animation-delay: 1.125s;
  border-color: #0040ff;
}
.s:nth-child(19) {
  animation-delay: 1.1875s;
  border-color: #0060ff;
}
.s:nth-child(20) {
  animation-delay: 1.25s;
  border-color: #0080ff;
}
.s:nth-child(21) {
  animation-delay: 1.3125s;
  border-color: #009fff;
}
.s:nth-child(22) {
  animation-delay: 1.375s;
  border-color: deepskyblue;
}
.s:nth-child(23) {
  animation-delay: 1.4375s;
  border-color: #00dfff;
}
.s:nth-child(24) {
  animation-delay: 1.5s;
  border-color: aqua;
}
.s:nth-child(25) {
  animation-delay: 1.5625s;
  border-color: #00ffdf;
}
.s:nth-child(26) {
  animation-delay: 1.625s;
  border-color: #00ffbf;
}
.s:nth-child(27) {
  animation-delay: 1.6875s;
  border-color: #00ff9f;
}
.s:nth-child(28) {
  animation-delay: 1.75s;
  border-color: #00ff80;
}
.s:nth-child(29) {
  animation-delay: 1.8125s;
  border-color: #00ff60;
}
.s:nth-child(30) {
  animation-delay: 1.875s;
  border-color: #00ff40;
}
.s:nth-child(31) {
  animation-delay: 1.9375s;
  border-color: #00ff20;
}
.s:nth-child(32) {
  animation-delay: 2s;
  border-color: lime;
}
.s:nth-child(33) {
  animation-delay: 2.0625s;
  border-color: #20ff00;
}
.s:nth-child(34) {
  animation-delay: 2.125s;
  border-color: #40ff00;
}
.s:nth-child(35) {
  animation-delay: 2.1875s;
  border-color: #60ff00;
}
.s:nth-child(36) {
  animation-delay: 2.25s;
.........完整代码请登录后点击上方下载按钮下载查看