svg+css实现罗盘纹理旋转动画效果代码-html代码-BFW代码库

svg+css实现罗盘纹理旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现罗盘纹理旋转动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body {
  background-color:#121a1a;
}

.circles {
  stroke-width: 10;
  stroke-linecap: round;
  fill:none;
}

.clockwise {
  animation: clockwise 30s linear infinite;
}

.counter {
  animation: counter 30s linear infinite;
}

@keyframes clockwise {
  0% {stroke-dasharray: 20 0 20; }
  50% {stroke-dasharray: 20;}
  100% { stroke-dasharray: 20 0 20;}
}

@keyframes counter {
  0% {stroke-dasharray: 20;}
  50% {stroke-dasharray: 20 0 20;}
  100% { stroke-dasharray: 20;}
}
</style>


</head>

<body  >
  <svg height="95vh" width="95vw" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50%" cy="50%" r="36%" stroke-width="5" stroke="#2C4B4C" fill="#233839" /> 
  <circle class="circles clockwise" cx="50%" cy="50%" r="33%" stroke="#54bd24"/> 
  <circle class="circles counter" cx="50%" cy="50%" r="30%" stroke="#1ed443"/> 
  <circle class="circ.........完整代码请登录后点击上方下载按钮下载查看