网页CSS3实现的3D隧道效果

  <div class="scene">    <div class="wrapper">      <ul class="tunnel">        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>      </ul>    </div>  </div>

  @keyframes roundandround {    to {      transform: rotateX(360deg);    }  }  body {    background-color: #000000;  }    .scene {    width: 600px;    height: 600px;    margin: 0 auto;    perspective: 500px;  }    .wrapper {    width: 100%;    height: 100%;    transform-style: preserve-3d;    transform: rotateY(0deg) translateZ(300px);  }    .tunnel {    position: relative;    width: 200px;    height: 200px;    margin: 0 auto;    transform-style: preserve-3d;    animation: roundandround 10s infinite linear;  }    .tunnel .ring {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    border: 6px;    border-style: dashed;    border-radius: 50%;    transform-origin: 50% 50%;    color: #8df435;    transform: translateY(-200px);  }    /* SASS optimisation thanks to @imjared */  .ring:nth-child(1) {    color: #ff1500;    transform: rotateX(5deg) translateY(-200px);  }    .ring:nth-child(2) {    color: #ff2b00;    transform: rotateX(10deg) translateY(-200px);  }    .ring:nth-child(3) {    color: #ff4000;    transform: rotateX(15deg) translateY(-200px);  }    .ring:nth-child(4) {    color: #ff5500;    transform: rotateX(20deg) translateY(-200px);  }    .ring:nth-child(5) {    color: #ff6a00;    transform: rotateX(25deg) translateY(-200px);  }    .ring:nth-child(6) {    color: #ff8000;    transform: rotateX(30deg) translateY(-200px);  }    .ring:nth-child(7) {    color: #ff9500;    transform: rotateX(35deg) translateY(-200px);  }    .ring:nth-child(8) {    color: #ffaa00;    transform: rotateX(40deg) translateY(-200px);  }    .ring:nth-child(9) {    color: #ffbf00;    transform: rotateX(45deg) translateY(-200px);  }    .ring:nth-child(10) {    color: #ffd500;    transform: rotateX(50deg) translateY(-200px);  }    .ring:nth-child(11) {    color: #ffea00;    transform: rotateX(55deg) translateY(-200px);  }    .ring:nth-child(12) {    color: yellow;    transform: rotateX(60deg) translateY(-200px);  }    .ring:nth-child(13) {    color: #eaff00;    transform: rotateX(65deg) translateY(-200px);  }    .ring:nth-child(14) {    color: #d5ff00;    transform: rotateX(70deg) translateY(-200px);  }    .ring:nth-child(15) {    color: #bfff00;    transform: rotateX(75deg) translateY(-200px);  }    .ring:nth-child(16) {    color: #aaff00;    transform: rotateX(80deg) translateY(-200px);  }    .ring:nth-child(17) {    color: #95ff00;    transform: rotateX(85deg) translateY(-200px);  }    .ring:nth-child(18) {    color: #80ff00;    transform: rotateX(90deg) translateY(-200px);  }    .ring:nth-child(19) {    color: #6aff00;    transform: rotateX(95deg) translateY(-200px);  }    .ring:nth-child(20) {    color: #55ff00;    transform: rotateX(100deg) translateY(-200px);  }    .ring:nth-child(21) {    color: #40ff00;    transform: rotateX(105deg) translateY(-200px);  }    .ring:nth-child(22) {    color: #2bff00;    transform: rotateX(110deg) translateY(-200px);  }    .ring:nth-child(23) {    color: #15ff00;    transform: rotateX(115deg) translateY(-200px);  }    .ring:nth-child(24) {    color: lime;    transform: rotateX(120deg) translateY(-200px);  }    .ring:nth-child(25) {    color: #00ff15;    transform: rotateX(125deg) translateY(-200px);  }    .ring:nth-child(26) {    color: #00ff2b;    transform: rotateX(130deg) translateY(-200px);  }    .ring:nth-child(27) {    color: #00ff40;    transform: rotateX(135deg) translateY(-200px);  }    .ring:nth-child(28) {    color: #00ff55;    transform: rotateX(140deg) translateY(-200px);  }    .ring:nth-child(29) {    color: #00ff6a;    transform: rotateX(145deg) translateY(-200px);  }    .ring:nth-child(30) {    color: #00ff80;    transform: rotateX(150deg) translateY(-200px);  }    .ring:nth-child(31) {    color: #00ff95;    transform: rotateX(155deg) translateY(-200px);  }    .ring:nth-child(32) {    color: #00ffaa;    transform: rotateX(160deg) translateY(-200px);  }    .ring:nth-child(33) {    color: #00ffbf;    transform: rotateX(165deg) translateY(-200px);  }    .ring:nth-child(34) {    color: #00ffd5;    transform: rotateX(170deg) translateY(-200px);  }    .ring:nth-child(35) {    color: #00ffea;    transform: rotateX(175deg) translateY(-200px);  }    .ring:nth-child(36) {    color: cyan;    transform: rotateX(180deg) translateY(-200px);  }    .ring:nth-child(37) {    color: #00eaff;    transform: rotateX(185deg) translateY(-200px);  }    .ring:nth-child(38) {    color: #00d5ff;    transform: rotateX(190deg) translateY(-200px);  }    .ring:nth-child(39) {    color: deepskyblue;    transform: rotateX(195deg) translateY(-200px);  }    .ring:nth-child(40) {    color: #00aaff;    transform: rotateX(200deg) translateY(-200px);  }    .ring:nth-child(41) {    color: #0095ff;    transform: rotateX(205deg) translateY(-200px);  }    .ring:nth-child(42) {    color: #0080ff;    transform: rotateX(210deg) translateY(-200px);  }    .ring:nth-child(43) {    color: #006aff;    transform: rotateX(215deg) translateY(-200px);  }    .ring:nth-child(44) {    color: #0055ff;    transform: rotateX(220deg) translateY(-200px);  }    .ring:nth-child(45) {    color: #0040ff;    transform: rotateX(225deg) translateY(-200px);  }    .ring:nth-child(46) {    color: #002bff;    transform: rotateX(230deg) translateY(-200px);  }    .ring:nth-child(47) {    color: #0015ff;    transform: rotateX(235deg) translateY(-200px);  }    .ring:nth-child(48) {    color: blue;    transform: rotateX(240deg) translateY(-200px);  }    .ring:nth-child(49) {    color: #1500ff;    transform: rotateX(245deg) translateY(-200px);  }    .ring:nth-child(50) {    color: #2b00ff;    transform: rotateX(250deg) translateY(-200px);  }    .ring:nth-child(51) {    color: #4000ff;    transform: rotateX(255deg) translateY(-200px);  }    .ring:nth-child(52) {    color: #5500ff;    transform: rotateX(260deg) translateY(-200px);  }    .ring:nth-child(53) {    color: #6a00ff;    transform: rotateX(265deg) translateY(-200px);  }    .ring:nth-child(54) {    color: #8000ff;    transform: rotateX(270deg) translateY(-200px);  }    .ring:nth-child(55) {    color: #9500ff;    transform: rotateX(275deg) translateY(-200px);  }    .ring:nth-child(56) {    color: #aa00ff;    transform: rotateX(280deg) translateY(-200px);  }    .ring:nth-child(57) {    color: #bf00ff;    transform: rotateX(285deg) translateY(-200px);  }    .ring:nth-child(58) {    color: #d500ff;    transform: rotateX(290deg) translateY(-200px);  }    .ring:nth-child(59) {    color: #ea00ff;    transform: rotateX(295deg) translateY(-200px);  }    .ring:nth-child(60) {    color: magenta;    transform: rotateX(300deg) translateY(-200px);  }    .ring:nth-child(61) {    color: #ff00ea;    transform: rotateX(305deg) translateY(-200px);  }    .ring:nth-child(62) {    color: #ff00d5;    transform: rotateX(310deg) translateY(-200px);  }    .ring:nth-child(63) {    color: #ff00bf;    transform: rotateX(315deg) translateY(-200px);  }    .ring:nth-child(64) {    color: #ff00aa;    transform: rotateX(320deg) translateY(-200px);  }    .ring:nth-child(65) {    color: #ff0095;    transform: rotateX(325deg) translateY(-200px);  }    .ring:nth-child(66) {    color: #ff0080;    transform: rotateX(330deg) translateY(-200px);  }    .ring:nth-child(67) {    color: #ff006a;    transform: rotateX(335deg) translateY(-200px);  }    .ring:nth-child(68) {    color: #ff0055;    transform: rotateX(340deg) translateY(-200px);  }    .ring:nth-child(69) {    color: #ff0040;    transform: rotateX(345deg) translateY(-200px);  }    .ring:nth-child(70) {    color: #ff002b;    transform: rotateX(350deg) translateY(-200px);  }    .ring:nth-child(71) {    color: #ff0015;    transform: rotateX(355deg) translateY(-200px);  }    .ring:nth-child(72) {    color: red;    transform: rotateX(360deg) translateY(-200px);  }