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 ..........完整代码请登录后点击上方下载按钮下载查看