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

代码语言：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.778l7.818-5.472c1.978-1.384 4.628-1.162 6.487.377 1.882 1.558 2.625 4.188 1.592 6.402l-4.174 8.947a7.234 7.234 0 0 0 3.497 9.614l4.469 2.085a7.234 7.234 0 0 0 9.614-3.497l4.351-9.326c.988-2.118 3.351-3.213 5.657-2.833 2.351.387 4.221 2.239 4.428 4.612l.881 10.096a7.234 7.234 0 0 0 7.836 6.577l4.913-.429a7.234 7.234 0 0 0 6.578-7.836l-.984-11.264c-.163-1.876 1.023-3.593 2.792-4.237 1.77-.643 3.781-.089 4.861 1.453l6.111 8.732a7.234 7.234 0 0 0 10.075 1.778l4.04-2.828a7.233 7.233 0 0 0 1.779-10.074l-5.125-7.323c-1.546-2.208-1.27-5.168.466-7.229 1.732-2.058 4.626-2.879 7.064-1.742l8.56 3.994a7.234 7.234 0 0 0 9.614-3.498l2.085-4.469a7.233 7.233 0 0 0-3.497-9.614l-9.743-4.546c-1.875-.874-2.848-2.965-2.493-5.003.356-2.047 1.985-3.659 4.054-3.839l10.249-.895a7.233 7.233 0 0 0 6.577-7.836l-.429-4.913a7.233 7.233 0 0 0-7.836-6.577l-9.698.846c-2.336.204-4.461-1.299-5.254-3.505-.787-2.192-.12-4.687 1.789-6.023l8.812-6.167a7.234 7.234 0 0 0 1.778-10.075l-2.828-4.04a7.233 7.233 0 0 0-10.074-1.779l-8.913 6.238c-1.809 1.267-4.239 1.056-5.922-.376-1.665-1.416-2.299-3.769-1.374-5.75l4.46-9.56a7.234 7.234 0 0 0-3.497-9.615l-4.469-2.085ZM245 171c14.912 0 27-12.088 27-27s-12.088-27-27-27-27 12.088-27 27 12.088 27 27 27Z" />
    <path class="gear-m" fill="var(--magenta-dark)" fill-rule="evenodd" clip-rule="evenodd" d="M337.269 186.702a4.801 4.801 0 0 0-6.381 2.321l-3.045 6.527c-.943 2.021-3.152 3.095-5.369 2.85a39.58 39.58 0 0 0-5.037-.234c-2.219.038-4.308-1.224-5.066-3.309l-2.8-7.696a4.8 4.8 0 0 0-6.153-2.87l-8.058 2.931a4.8 4.8 0 0 0-2.87 6.152l2.742 7.538c.766 2.107-.049 4.44-1.808 5.83a39.581 39.581 0 0 0-4.075 3.707c-1.541 1.613-3.923 2.209-5.944 1.266l-6.528-3.046a4.801 4.801 0 0 0-6.38 2.321l-3.626 7.771a4.801 4.801 0 0 0 2.321 6.38l6.528 3.046c2.021.943 3.095 3.151 2.849 5.368a39.385 39.385 0 0 0-.2.........完整代码请登录后点击上方下载按钮下载查看