您的位置:首页 > Web前端 > > 正文

css3滤镜过渡效果代码(CSS3实现的3D隧道效果)

更多 时间:2022-01-24 00:37:01 类别:Web前端 浏览量:308

css3滤镜过渡效果代码

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

css3滤镜过渡效果代码(CSS3实现的3D隧道效果)

实现代码

html

  • <li class="scene">
      <li 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>
      </li>
    </li>
    
  • css3

  • @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);
    }
    
    
  • 以上就是CSS3实现的3D隧道效果的详细内容,更多关于CSS3 3D隧道效果的资料请关注开心学习网其它相关文章!

    标签:CSS3 3d 隧道
    您可能感兴趣