css实现彩色圈圈扩散动画效果代码-html代码-BFW代码库

css实现彩色圈圈扩散动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现彩色圈圈扩散动画效果代码，可电仪下面的色圈更换颜色。

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

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

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

<style>
    :root {
  --golden-glow: #ffad00;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ececec;
}

html {
  font-size: 10px;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.rings {
  position: relative;
}

.ring {
  box-shadow: 
    -10px -10px 15px rgba(255, 255, 255, 0.3),
    10px 10px 15px rgba(70, 70, 70, 0.15),
    inset -10px -10px 15px rgba(255, 255, 255, 0.3),
    inset 10px 10px 15px rgba(70, 70, 70, 0.15);
  border: 13px solid #ececec;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ring1 {
  height: 28rem;
  width: 28rem;
  animation: glow1 2.5s infinite;
}

@keyframes glow1 {
  60% {
    background-color: #ececec;
  }
  80% {
    background-color: var(--golden-glow);
  }
  100% {
    background-color: var(--golden-glow);
  }
}

.ring2 {
  height: 20rem;
  width: 20rem;
  animation: glow2 2.5s infinite;
}

@keyframes glow2 {
  40% {
    background-color: #ececec;
  }
  60% {
    background-color: var(--golden-glow);
  }
  100% {
    background-color: var(--golden-glow);
  }
}

.ring3 {
  height: 12rem;
  width: 12rem;
  animation: glow3 2.5s infinite;
}

@keyframes glow3 {
  20% {
    background-color: #ececec;
  }
  40% {
    background-color: var(--golden-glow);
  }
  100% {
    background-color: var(--golden-glow);
  }
}

.ring4 {
  height: 5rem;
  width: 5rem;
  animation: glow4 2.5s infinite;
}

@keyframes glow4 {
  0% {
    background-color: #ececec;
  }
  20% {
    background-color: var(--golden-glow);
  }
  100% {
    background-color: var(--golden-glow);
  }
}

.choose-theme {
  margin-top: 5rem;
  display: flex;
  column-gap: 10px;
}

.theme {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  border: 5px solid #ececec;
  box-shadow: 
    -10px -10px 15px rgba(255, 255, 255, 0.3),
    10px 10px 15px rgba(70, 70, 70, 0.15),
    inse.........完整代码请登录后点击上方下载按钮下载查看