大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用 css 实现一个盗墓必备乱转的指北针。

最新文章通过公众号「设计师工作日常」发布。

(目录)

整体效果

知识点： ① css 绘制三角形 ② animation 动画属性 ③ transform 属性值 rotate 旋转

思路： 使用 css 绘制出指北针，通过 animation 设置动画，分别设置不同关键帧时的 transform 属性值（rotate 值）。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="loading40">
  <span class="one-sj40"></span>
  <span class="two-sj40"></span>
  <span class="round40"></span>
</div>

通过 3 个 span 标签绘制出指北针。

css 部分代码

.loading40{
  width: 126px;
  height: 126px;
  background-color: #000000;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 6px solid #FFCA1C;
  transform: rotate(35deg);
  animation: zhuan40-eff 6s ease-in-out infinite;
  box-shadow: inset 0px 0px 2px #ffffff;
}
.one-sj40{
  border-bottom: 40px solid #FFCA1C;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  position: absolute;
  top: 22px;
  left: 47px;
}
.two-sj40{
  border-top: 40px solid #FFF42B;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  position: absolute;
  bottom: 22px;
  left: 47px;
}
.round40{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #000000;
  position: absolute;
  top: 57px;
  left: 57px;
  z-index: 10;
}
@keyframes zhuan40-eff{
  0% {
    transform: rotate(35deg);
  }
  30%{
    transform: rotate(0deg);
  }
  45%{
    transform: rotate(-60deg);
  }
  60% {
    transform: rotate(60deg);
  }
  65% {
    transform: rotate(-30deg);
  }
  80%{
    transform: rotate(100deg);
  }
  95%{
    transform: rotate(-10deg);
  }
  100%{
    transform: rotate(35deg);
  }
}

1、绘制指南针： 分别绘制一个圆形，以及两个三角形，通过 position 定位组成指北针，再绘制一个黑色圆形背景，一个指北针的圆形图标就绘制完成。

2、然后再给图标整体加上 animation 动画属性，并定义不同关键帧下 transform 属性值，让指北针旋转不同的角度。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>乱转的指北针</title>
  </head>
  <body>
    <div class="app">
      <div class="loading40">
        <span class="one-sj40"></span>
        <span class="two-sj40"></span>
        <span class="round40"></span>
      </div>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading40{
  width: 126px;
  height: 126px;
  background-color: #000000;
  border-radius: 50%;
  position: relative;
  border: 6px solid #FFCA1C;
  transform: rotate(35deg);
  animation: zhuan40-eff 6s ease-in-out infinite;
  box-shadow: inset 0px 0px 2px #ffffff;
}
.one-sj40{
  border-bottom: 40px solid #FFCA1C;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  position: absolute;
  top: 22px;
  left: 47px;
}
.two-sj40{
  border-top: 40px solid #FFF42B;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  position: absolute;
  bottom: 22px;
  left: 47px;
}
.round40{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #000000;
  position: absolute;
  top: 57px;
  left: 57px;
  z-index: 10;
}
@keyframes zhuan40-eff{
  0% {
    transform: rotate(35deg);
  }
  30%{
    transform: rotate(0deg);
  }
  45%{
    transform: rotate(-60deg);
  }
  60% {
    transform: rotate(60deg);
  }
  65% {
    transform: rotate(-30deg);
  }
  80%{
    transform: rotate(100deg);
  }
  95%{
    transform: rotate(-10deg);
  }
  100%{
    transform: rotate(35deg);
  }
}

页面渲染效果

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

我是 Just，这里是「设计师工作日常」，求点赞求关注！