div+css实现文字圆圈分割逐个显示动画效果代码-html代码-BFW代码库

div+css实现文字圆圈分割逐个显示动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现文字圆圈分割逐个显示动画效果代码

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

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

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


  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Afacad:wght@700&display=swap");

@property --a {
  syntax: "<angle>";
  inherits: true;
  initial-value: -1turn;
}
body {
  margin: 0;
  background: #333;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.round {
  background: #f2da13;
  width: min(60vw, 60vh);
  height: min(60vw, 60vh);
  position: relative;
  border-radius: 50%;
}
.lower,
.upper {
  width: 100%;
  height: 100%;
  position: absolute;
  isolation: isolate;
  mix-blend-mode: multiply;
}
svg {
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
}
.lower {
  background: conic-gradient(
    from -0.25turn,
    rgb(255 255 255 / 1) calc(var(--a) - 1turn),
    rgb(255 255 255 / 1) calc(var(--a) - 0.3turn),
    rgb(255 255 255 / 0) calc(var(--a) + 0.7turn),
    rgb(255 255 255 / 0) calc(var(--a) + 1turn),
    rgb(255 255 255 / 1) calc(var(--a) + 1turn)
  );
  animation: fade 10s linear infinite;
}
.upper {
  background: conic-gradient(
    from 0.25turn,
    rgb(255 255 255 / 1) calc(var(--a) - 1turn),
  .........完整代码请登录后点击上方下载按钮下载查看