div+css实现动态旋转效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现动态效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #140032;
  overflow: hidden;
  margin: 0;
}
body *, body *:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
}

.half:nth-child(2) {
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1);
}
.half .life {
  width: 50px;
  height: 50px;
  -webkit-animation: Medallion 6s ease-in-out infinite;
          animation: Medallion 6s ease-in-out infinite;
}
.half .life:after {
  content: "";
  width: inherit;
  height: inherit;
  border-top: 25px dotted transparent;
  border-left: 5px solid transparent;
}
.half .life:nth-child(1) {
  -webkit-animation-delay: -0.06s;
          animation-delay: -0.06s;
}
.half .life:nth-child(1):after {
  border-color: #ff0200;
  -webkit-transform: rotate(7.2deg) translate(2px, -2px) scale(0.01);
          transform: rotate(7.2deg) translate(2px, -2px) scale(0.01);
}
.half .life:nth-child(2) {
  -webkit-animation-delay: -0.12s;
          animation-delay: -0.12s;
}
.half .life:nth-child(2):after {
  border-color: #ff0400;
  -webkit-transform: rotate(14.4deg) translate(4px, -4px) scale(0.02);
          transform: rotate(14.4deg) translate(4px, -4px) scale(0.02);
}
.half .life:nth-child(3) {
  -webkit-animation-delay: -0.18s;
          animation-delay: -0.18s;
}
.half .life:nth-child(3):after {
  border-color: #ff0600;
  -webkit-transform: rotate(21.6deg) translate(6px, -6px) scale(0.03);
          transform: rotate(21.6deg) translate(6px, -6px) scale(0.03);
}
.half .life:nth-child(4) {
  -webkit-animation-delay: -0.24s;
          animation-delay: -0.24s;
}
.half .life:nth-child(4):after {
  border-color: #ff0900;
  -webkit-transform: rotate(28.8deg) translate(8px, -8px) scale(0.04);
          transform: rotate(28.8deg) translate(8px, -8px) scale(0.04);
}
.half .life:nth-child(5) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.half .life:nth-child(5):after {
  border-color: #ff0b00;
  -webkit-transform: rotate(36deg) translate(10px, -10px) scale(0.05);
          transform: rotate(36deg) translate(10px, -10px) scale(0.05);
}
.half .life:nth-child(6) {
  -webkit-animation-delay: -0.36s;
          animation-delay: -0.36s;
}
.half .life:nth-child(6):after {
  border-color: #ff0d00;
  -webkit-transform: rotate(43.2deg) translate(12px, -12px) scale(0.06);
          transform: rotate(43.2deg) translate(12px, -12px) scale(0.06);
}
.half .life:nth-child(7) {
  -webkit-animation-delay: -0.42s;
          animation-delay: -0.42s;
}
.half .life:nth-child(7):after {
  border-color: #ff0f00;
  -webkit-transform: rotate(50.4deg) translate(14px, -14px) scale(0.07);
          transform: rotate(50.4deg) translate(14px, -14px) scale(0.07);
}
.half .life:nth-child(8) {
  -webkit-animation-delay: -0.48s;
          animation-delay: -0.48s;
}
.half .life:nth-child(8):after {
  border-color: #ff1100;
  -webkit-transform: rotate(57.6deg) translate(16px, -16px) scale(0.08);
          transform: rotate(57.6deg) translate(16px, -16px) scale(0.08);
}
.half .life:nth-child(9) {
  -webkit-animation-delay: -0.54s;
          animation-delay: -0.54s;
}
.half .life:nth-child(9):after {
  border-color: #ff1300;
  -webkit-transform: rotate(64.8deg) translate(18px, -18px) scale(0.09);
          transform: rotate(64.8deg) translate(18px, -18px) scale(0.09);
}
.half .life:nth-child(10) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.half .life:nth-child(10):after {
  border-color: #ff1500;
  -webkit-transform: rotate(72deg) translate(20px, -20px) scale(0.1);
          transform: rotate(72deg) translate(20px, -20px) scale(0.1);
}
.half .life:nth-child(11) {
  -webkit-animation-delay: -0.66s;
          animation-delay: -0.66s;
}
.half .life:nth-child(11):after {
  border-color: #ff1700;
  -webkit-transform: rotate(79.2deg) translate(22px, -22px) scale(0.11);
          transform: rotate(79.2deg) translate(22px, -22px) scale(0.11);
}
.half .life:nth-child(12) {
  -webkit-animation-delay: -0.72s;
          animation-delay: -0.72s;
}
.half .life:nth-child(12):after {
  border-color: #ff1a00;
  -webkit-transform: rotate(86.4deg) translate(24px, -24px) scale(0.12);
          transform: rotate(86.4deg) translate(24px, -24px) scale(0.12);
}
.half .life:nth-child(13) {
  -webkit-animation-delay: -0.78s;
          animation-delay: -0.78s;
}
.half .life:nth-child(13):after {
  border-color: #ff1c00;
  -webkit-transform: rotate(93.6deg) translate(26px, -26px) scale(0.13);
          transform: rotate(93.6deg) translate(26px, -26px) scale(0.13);
}
.half .life:nth-child(14) {
  -webkit-animation-delay: -0.84s;
          animation-delay: -0.84s;
}
.half .life:nth-child(14):after {
  border-color: #ff1e00;
  -webkit-transform: rotate(100.8deg) translate(28px, -28px) scale(0.14);
          transform: rotate(100.8deg) translate(28px, -28px) scale(0.14);
}
.half .life:nth-child(15) {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.half .life:nth-child(15):after {
  border-color: #ff2000;
  -webkit-transform: rotate(108deg) translate(30px, -30px) scale(0.15);
          transform: rotate(108deg) translate(30px, -30px) scale(0.15);
}
.half .life:nth-child(16) {
  -webkit-animation-delay: -0.96s;
          animation-delay: -0.96s;
}
.half .life:nth-child(16):after {
  border-color: #ff2200;
  -webkit-transform: rotate(115.2deg) translate(32px, -32px) scale(0.16);
          transform: rotate(115.2deg) translate(32px, -32px) scale(0.16);
}
.half .life:nth-child(17) {
  -webkit-animation-delay: -1.02s;
          animation-delay: -1.02s;
}
.half .life:nth-child(17):after {
  border-color: #ff2400;
  -webkit-transform: rotate(122.4deg) translate(34px, -34px) scale(0.17);
          transform: rotate(122.4deg) translate(34px, -34px) scale(0.17);
}
.half .life:nth-child(18) {
  -webkit-animation-delay: -1.08s;
          animation-delay: -1.08s;
}
.half .life:nth-child(18):after {
  border-color: #ff2600;
  -webkit-transform: rotate(129.6deg) translate(36px, -36px) scale(0.18);
          transform: rotate(129.6deg) translate(36px, -36px) scale(0.18);
}
.half .life:nth-child(19) {
  -webkit-animation-delay: -1.14s;
          animation-delay: -1.14s;
}
.half .life:nth-child(19):after {
  border-color: #ff2800;
  -webkit-transform: rotate(136.8deg) translate(38px, -38px) scale(0.19);
          transform: rotate(136.8deg) translate(38px, -38px) scale(0.19);
}
.half .life:nth-child(20) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.half .life:nth-child(20):after {
  border-color: #ff2b00;
  -webkit-transform: rotate(144deg) translate(40px, -40px) scale(0.2);
          transform: rotate(144deg) translate(40px, -40px) scale(0.2);
}
.half .lif.........完整代码请登录后点击上方下载按钮下载查看