svg+css实现齿轮旋转文字动画效果代码-html代码-BFW代码库

svg+css实现齿轮旋转文字动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现齿轮旋转文字动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
:root {
  --bg: #015;
  --yellow-dark: #980;
  --yellow: #fff000;
  --magenta-dark: #909;
  --magenta: #f1d;
  --cyan-dark: #007d99;
  --cyan: #1ff;
  --size: 85vmin;
  --border-width: 2vmin;
  --duration: 5s;
  --ease: ease-in-out;
}
html,
body {
  height: 100%;
  background: var(--bg);
  margin: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo {
  position: relative;
  width: var(--size);
  height: var(--size);
  padding: 0.5vmin;
  overflow: hidden;
}
.border {
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  background: conic-gradient(
    var(--yellow) 0deg 120deg,
    var(--magenta) 120deg 240deg,
    var(--cyan) 240deg 360deg
  );
  transform-origin: center;
  animation-name: spin-border;
}
svg {
  position: absolute;
  top: var(--border-width);
  left: var(--border-width);
  width: calc(100% - var(--border-width) * 2);
  width: calc(100% - var(--border-width) * 2);
}
circle {
  opacity: 0.75;
}
.border,
path {
  animation-duration: var(--duration);
  animation-timing-function: var(--ease);
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
path {
  animation-name: spin-gear;
}
.line-c,
.line-m,
.line-y {
  mix-blend-mode: screen;
}
.line-c,
.gear-c {
  --revolutions: 3;
  transform-origin: 28.49% 57.13%;
}
.line-m,
.gear-m {
  --revolutions: 6;
  transform-origin: 79.5% 59.25%;
}
.line-y,
.gear-y {
  --revolutions: -4;
  transform-origin: 61.25% 36%;
}

@keyframes spin-border {
  0%,
  10% {
    transform: rotate(-60deg);
  }
  90%,
  100% {
    transform: rotate(300deg);
  }
}
@keyframes spin-gear {
  0%,
  10% {
    transform: rotate(0deg);
  }
  90%,
  100% {
    transform: rotate(calc(360deg * var(--revolutions)));
  }
}
</style>




</head>

<body  >
  <div class="logo">
  <div class="border"></div>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 400 400">
    <rect x="0" y="0" width="400" height="400" fill="var(--bg)" />
    <circle cx="114" cy="229" r="18" fill="var(--cyan)" />
    <circle cx="318" cy="237" r="7" fill="var(--magenta)" />
    <circle cx="245" cy="144" r="10" fill="var(--yellow)" />
    <path class="gear-y" fill="var(--yellow-dark)" fill-rule="evenodd" clip-rule="evenodd" d="M274.517 76.886a7.234 7.234 0 0 0-9.614 3.498l-4.287 9.187c-.968 2.075-3.302 3.127-5.552 2.702-2.204-.417-3.932-2.179-4.127-4.413l-.895-10.255a7.234 7.234 0 0 0-7.836-6.577l-4.913.429a7.233 7.233 0 0 0-6.577 7.836l.796 9.116c.238 2.727-1.533 5.199-4.105 6.135-2.573.936-5.519.18-7.089-2.064l-5.619-8.029a7.234 7.234 0 0 0-10.075-1.778l-4.041 2.828a7.234 7.234 0 0 0-1.778 10.074l6.588 9.413c1.106 1.58.941 3.699-.295 5.178-1.241 1.484-3.324 2.041-5.077 1.223l-9.953-4.643a7.235 7.235 0 0 0-9.614 3.497l-2.085 4.469a7.235 7.235 0 0 0 3.497 9.615l8.764 4.089c2.32 1.082 3.492 3.694 3.04 6.213-.45 2.505-2.433 4.49-4.969 4.711l-10.096.881a7.234 7.234 0 0 0-6.577 7.836l.429 4.913a7.234 7.234 0 0 0 7.836 6.578l10.67-.932c2.272-.198 4.343 1.251 5.131 3.391.793 2.154.142 4.617-1.739 5.933l-7.939 5.557a7.233 7.233 0 0 0-1.778 10.074l2.828 4.041a7.233 7.233 0 0 0 10.074 1..........完整代码请登录后点击上方下载按钮下载查看