div+css实现摇摆组成的圆环摆动形成正方形转动动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现摇摆组成的圆环摆动形成正方形转动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    body {
  display: flex;
  align-items: center;
  height: 100vh;
  background-color: #001524;
}

.container {
  display: block;
  height: 300px;
  width: 300px;
  margin: 0 auto;
}

.baton {
  display: block;
  height: 2px;
  width: 70px;
  background-color: #459fa5;
  animation: scale 1.25s infinite linear;
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  -ms-transform-origin: 0;
  -o-transform-origin: 0;
  transform-origin: 0;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.baton:before {
  content: "";
  display: block;
  height: 5px;
  width: 5px;
  background-color: #f5a51c;
  position: absolute;
  top: -2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
.baton:after {
  content: "";
  display: block;
  height: 5px;
  width: 5px;
  background-color: #f5a51c;
  position: absolute;
  top: -2px;
  right: 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.metronome {
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  -ms-transform-origin: 0;
  -o-transform-origin: 0;
  transform-origin: 0;
  animation: metronome 1.25s infinite linear;
}

.baton-0 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}
.baton-0 .baton, .baton-0 .baton:after, .baton-0 .metronome {
  animation-delay: 0s;
}

.baton-1 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
.baton-1 .baton, .baton-1 .baton:after, .baton-1 .metronome {
  animation-delay: -0.14s;
}

.baton-2 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -o-transform: rotate(20deg);
}
.baton-2 .baton, .baton-2 .baton:after, .baton-2 .metronome {
  animation-delay: -0.28s;
}

.baton-3 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}
.baton-3 .baton, .baton-3 .baton:after, .baton-3 .metronome {
  animation-delay: -0.42s;
}

.baton-4 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
}
.baton-4 .baton, .baton-4 .baton:after, .baton-4 .metronome {
  animation-delay: -0.56s;
}

.baton-5 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(50deg);
  -moz-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  -o-transform: rotate(50deg);
}
.baton-5 .baton, .baton-5 .baton:after, .baton-5 .metronome {
  animation-delay: -0.7s;
}

.baton-6 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
}
.baton-6 .baton, .baton-6 .baton:after, .baton-6 .metronome {
  animation-delay: -0.84s;
}

.baton-7 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(70deg);
  -moz-transform: rotate(70deg);
  -ms-transform: rotate(70deg);
  -o-transform: rotate(70deg);
}
.baton-7 .baton, .baton-7 .baton:after, .baton-7 .metronome {
  animation-delay: -0.98s;
}

.baton-8 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -ms-transform: rotate(80deg);
  -o-transform: rotate(80deg);
}
.baton-8 .baton, .baton-8 .baton:after, .baton-8 .metronome {
  animation-delay: -1.12s;
}

.baton-9 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
.baton-9 .baton, .baton-9 .baton:after, .baton-9 .metronome {
  animation-delay: -1.26s;
}

.baton-10 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(100deg);
  -moz-transform: rotate(100deg);
  -ms-transform: rotate(100deg);
  -o-transform: rotate(100deg);
}
.baton-10 .baton, .baton-10 .baton:after, .baton-10 .metronome {
  animation-delay: -1.4s;
}

.baton-11 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(110deg);
  -moz-transform: rotate(110deg);
  -ms-transform: rotate(110deg);
  -o-transform: rotate(110deg);
}
.baton-11 .baton, .baton-11 .baton:after, .baton-11 .metronome {
  animation-delay: -1.54s;
}

.baton-12 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
}
.baton-12 .baton, .baton-12 .baton:after, .baton-12 .metronome {
  animation-delay: -1.68s;
}

.baton-13 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(130deg);
  -moz-transform: rotate(130deg);
  -ms-transform: rotate(130deg);
  -o-transform: rotate(130deg);
}
.baton-13 .baton, .baton-13 .baton:after, .baton-13 .metronome {
  animation-delay: -1.82s;
}

.baton-14 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(140deg);
  -moz-transform: rotate(140deg);
  -ms-transform: rotate(140deg);
  -o-transform: rotate(140deg);
}
.baton-14 .baton, .baton-14 .baton:after, .baton-14 .metronome {
  animation-delay: -1.96s;
}

.baton-15 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  -o-transform: rotate(150deg);
}
.baton-15 .baton, .baton-15 .baton:after, .baton-15 .metronome {
  animation-delay: -2.1s;
}

.baton-16 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(160deg);
  -moz-transform: rotate(160deg);
  -ms-transform: rotate(160deg);
  -o-transform: rotate(160deg);
}
.baton-16 .baton, .baton-16 .baton:after, .baton-16 .metronome {
  animation-delay: -2.24s;
}

.baton-17 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(170deg);
  -moz-transform: rotate(170deg);
  -ms-transform: rotate(170deg);
  -o-transform: rotate(170deg);
}
.baton-17 .baton, .baton-17 .baton:after, .baton-17 .metronome {
  animation-delay: -2.38s;
}

.baton-18 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
.baton-18 .baton, .baton-18 .baton:after, .baton-18 .metronome {
  animation-delay: -2.52s;
}

.baton-19 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(190deg);
  -moz-transform: rotate(190deg);
  -ms-transform: rotate(190deg);
  -o-transform: rotate(190deg);
}
.baton-19 .baton, .baton-19 .baton:after, .baton-19 .metronome {
  animation-delay: -2.66s;
}

.baton-20 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(200deg);
  -moz-transform: rotate(200deg);
  -ms-transform: rotate(200deg);
  -o-transform: rotate(200deg);
}
.baton-20 .baton, .baton-20 .baton:after, .baton-20 .metronome {
  animation-delay: -2.8s;
}

.baton-21 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  -o-transform: rotate(210deg);
}
.baton-21 .baton, .baton-21 .baton:after, .baton-21 .metronome {
  animation-delay: -2.94s;
}

.baton-22 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(220deg);
  -moz-transform: rotate(220deg);
  -ms-transform: rotate(220deg);
  -o-transform: rotate(220deg);
}
.baton-22 .baton, .baton-22 .baton:after, .baton-22 .metronome {
  animation-delay: -3.08s;
}

.baton-23 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate(230deg);
  -moz-transform: rotate(230deg);
  -ms-transform: rotate(230deg);
  -o-transform: rotate(230deg);
}
.baton-23 .baton, .baton-23 .baton:after, .baton-23 .metronome {
  animation-delay: -3.22s;
}

.b.........完整代码请登录后点击上方下载按钮下载查看