js+css实现动感科技未来风格三维转盘动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：js+css实现动感科技未来风格三维转盘动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> 
   <style>
       body {
  background: black;
  font-family: "Orbitron", sans-serif;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.container .interface {
  color: #ffffff;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  animation: beginAnim 0.8s 1 ease;
}
.container .interface div {
  width: 150px;
  border-radius: 10%;
  border: 3px solid #33ABB9;
  box-shadow: 1px 1px 10px #33ABB9;
  background: #184344;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-ring {
  width: 80vw;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: calc(50% - 45vh);
  left: calc(50% - 40vw);
  transition: all 5s ease;
  transform: rotateX(0deg);
  will-change: transform;
  perspective: 800px;
  transform-style: preserve-3d;
}
.container-ring .ringMain {
  width: 100%;
  height: 100%;
  z-index: 1;
}
.container-ring .ringMain circle {
  fill: none;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  will-change: transform;
  stroke: #33ABB9;
}
.container-ring .ringMain .c1 {
  stroke-width: 0.1;
}
.container-ring .ringMain .c2 {
  stroke-width: 0.1;
  stroke-dasharray: 5, 10;
  animation: rotate-c2 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.container-ring .ringMain [class^=c3] {
  stroke-width: 1;
  transform: rotate(-90deg);
  animation: progress 10s ease-out forwards;
}
.container-ring .ringMain .c3-1-red {
  stroke: #BA2433;
  stroke-dasharray: 38, 100;
}
.container-ring .ringMain .c3-2 {
  stroke-dasharray: 46, 100;
}
.container-ring .ringMain .c3-3 {
  stroke-dasharray: 54, 100;
}
.container-ring .ringMain .c4 {
  stroke-width: 0.5;
  animation: rotate-c4 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.container-ring .ringMain .c5 {
  stroke-width: 0.7;
  stroke-dasharray: 40;
  animation: rotate-c5 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.container-ring .ringMain .c6 {
  stroke-width: 0.7;
  stroke-dasharray: 10;
  animation: rotate-c6 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.container-ring .ringMain .c7 {
  stroke-width: 0.7;
  stroke-dasharray: 0.3;
  animation: rotate-c7 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.container-ring .ringMain .c8 {
  stroke-width: 2;
  stroke-dasharray: 30, 100;
  animation: rotate-c8 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.container-ring .ringMain .c9 {
  stroke-width: 0.4;
  stroke-dasharray: 20;
  animation: rotate-c9 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.container-ring .ringMain .c10 {
  stroke-width: 0.4;
  stroke-dasharray: 80, 100;
  animation: rotate-c10 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.container-ring .ringMain .c11 {
  stroke-width: 1;
  stroke-dasharray: 80, 100;
  animation: rotate-c11 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.container-ring .cpu {
  position: absolute;
  color: #33ABB9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: transform 1s ease-out;
}
.container-ring .cpu p {
  font-size: 0.8vw;
  margin: 0;
}
.container-ring .rotate-skew {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  will-change: transform;
  z-index: -1;
  transition: transform 1s ease-out;
}
.container-ring .rotate-skew .skew-square {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  will-change: transform;
  animation: speed 2s infinite linear;
}
.container-ring .rotate-skew .skew-square [class^=square] {
  position: absolute;
  background: #33ABB9;
  transform-origin: 50% 50%;
  width: 25px;
  height: 15px;
  box-shadow: 1px 1px 10px #33ABB9;
  transition: all 1s ease-in;
  will-change: transform;
}
.container-ring .rotate-skew .skew-square .square-1 {
  transform: rotate(0deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-2 {
  transform: rotate(20deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-3 {
  transform: rotate(40deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-4 {
  transform: rotate(60deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-5 {
  transform: rotate(80deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-6 {
  transform: rotate(100deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-7 {
  transform: rotate(120deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-8 {
  transform: rotate(140deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-9 {
  transform: rotate(160deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-10 {
  transform: rotate(180deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-11 {
  transform: rotate(200deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-12 {
  transform: rotate(220deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-13 {
  transform: rotate(240deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-14 {
  transform: rotate(260deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-15 {
  transform: rotate(280deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-16 {
  transform: rotate(300deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-17 {
  transform: rotate(320deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rotate-skew .skew-square .square-18 {
  transform: rotate(340deg) translateY(-90px) skewX(-50deg);
}
.container-ring .rectangle {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  will-change: transform;
  transition: transform 1s ease-out;
}
.container-ring .rectangle [class^=rectangle] {
  position: absolute;
  background: #184344;
  border: 3px solid #33ABB9;
  border-radius: 20%;
  width: 45px;
  height: 25px;
}
.container-ring .rectangle .rectangle-2 {
  transform: rotate(15deg) translateY(-140px);
}
.container-ring .rectangle .rectangle-3 {
  transform: rotate(30deg) translateY(-140px);
}
.container-ring .rectangle .rectangle-4 {
  transform: rotate(45deg) translateY(-140px);
}
.container-ring .rectangle .rectangle-5 {
  transform: rotate(60deg) translateY(-140px);
}
.container-ring .rectangle .rectangle-6 {
  transform: rotate(75deg) translateY(-140px);
}
.container-ring .rectangle .rectangle-7 {
  transform: rotate(90deg) translateY(-140px);
}
.container-ring .rectangle .rectangle-8 {
  transform: rotate(105deg) translateY(-140px);
}
.container-ring .rectangle .rectangle-9 {
  transform: rotate(120deg) translateY(-140px);
}
.container-ring .rectangle .rectangle-10 {
  transform: rotate(135deg) translateY(-140px);
}
.container-ring .rectangle .rectangle-11 {
  transform: rotate(150deg) translateY(-140px);
}
.container-ring .rectangle .rectangle-12 {
  transform: rotate(165deg) translateY(-140px);
}
.container-ring .rectangle .rectangle-13 {
  transform: .........完整代码请登录后点击上方下载按钮下载查看