3D-Tunneleffekt implementiert durch CSS3

3D-Tunneleffekt implementiert durch CSS3

Der erzielte Effekt

Implementierungscode

html

<div Klasse="Szene">
  <div Klasse="Wrapper">
    <ul Klasse="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>

CSS3

@keyframes rundherum {
  Zu {
    transformieren: drehenX(360 Grad);
  }
}
Körper {
  Hintergrundfarbe: #000000;
}

.Szene {
  Breite: 600px;
  Höhe: 600px;
  Rand: 0 automatisch;
  Perspektive: 500px;
}

.wrapper {
  Breite: 100 %;
  Höhe: 100%;
  Transformationsstil: 3D bewahren;
  transformieren: drehenY(0 Grad) verschiebenZ(300px);
}

.tunnel {
  Position: relativ;
  Breite: 200px;
  Höhe: 200px;
  Rand: 0 automatisch;
  Transformationsstil: 3D bewahren;
  Animation: rundherum, 10 s, unendlich, linear;
}

.tunnel .ring {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100%;
  Rand: 6px;
  Rahmenstil: gestrichelt;
  Randradius: 50 %;
  Transform-Ursprung: 50 % 50 %;
  Farbe: #8df435;
  transformieren: übersetzenY(-200px);
}

/* SASS-Optimierung dank @imjared */
.ring:n-tes-Kind(1) {
  Farbe: #ff1500;
  transformieren: rotierenX(5 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(2) {
  Farbe: #ff2b00;
  transformieren: rotierenX(10 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(3) {
  Farbe: #ff4000;
  transformieren: rotierenX(15 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(4) {
  Farbe: #ff5500;
  transformieren: rotierenX(20 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(5) {
  Farbe: #ff6a00;
  transformieren: rotierenX(25 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(6) {
  Farbe: #ff8000;
  transformieren: rotierenX(30 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(7) {
  Farbe: #ff9500;
  transformieren: rotierenX(35 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(8) {
  Farbe: #ffaa00;
  transformieren: rotierenX(40 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(9) {
  Farbe: #ffbf00;
  transformieren: rotierenX(45 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(10) {
  Farbe: #ffd500;
  transformieren: rotierenX(50 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(11) {
  Farbe: #ffea00;
  transformieren: rotierenX(55 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(12) {
  Farbe: gelb;
  transformieren: rotierenX(60 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(13) {
  Farbe: #eaff00;
  transformieren: rotierenX(65 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(14) {
  Farbe: #d5ff00;
  transformieren: rotierenX(70 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(15) {
  Farbe: #bfff00;
  transformieren: rotierenX(75 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(16) {
  Farbe: #aaff00;
  transformieren: rotierenX(80 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(17) {
  Farbe: #95ff00;
  transformieren: rotierenX(85 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(18) {
  Farbe: #80ff00;
  transformieren: rotierenX(90 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(19) {
  Farbe: #6aff00;
  transformieren: rotierenX(95 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(20) {
  Farbe: #55ff00;
  transformieren: rotierenX(100 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(21) {
  Farbe: #40ff00;
  transformieren: rotierenX(105 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(22) {
  Farbe: #2bff00;
  transformieren: rotierenX(110 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(23) {
  Farbe: #15ff00;
  transformieren: rotierenX(115 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(24) {
  Farbe: Limette;
  transformieren: rotierenX(120 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(25) {
  Farbe: #00ff15;
  transformieren: rotierenX(125 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(26) {
  Farbe: #00ff2b;
  transformieren: rotierenX(130 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(27) {
  Farbe: #00ff40;
  transformieren: rotierenX(135 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(28) {
  Farbe: #00ff55;
  transformieren: rotierenX(140 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(29) {
  Farbe: #00ff6a;
  transformieren: rotierenX(145 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(30) {
  Farbe: #00ff80;
  transformieren: rotierenX(150 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(31) {
  Farbe: #00ff95;
  transformieren: rotierenX(155 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(32) {
  Farbe: #00ffaa;
  transformieren: rotierenX(160 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(33) {
  Farbe: #00ffbf;
  transformieren: rotierenX(165 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(34) {
  Farbe: #00ffd5;
  transformieren: rotierenX(170 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(35) {
  Farbe: #00ffea;
  transformieren: rotierenX(175 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(36) {
  Farbe: Cyan;
  transformieren: rotierenX(180 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(37) {
  Farbe: #00eaff;
  transformieren: rotierenX(185 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(38) {
  Farbe: #00d5ff;
  transformieren: rotierenX(190 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(39) {
  Farbe: tiefes Himmelblau;
  transformieren: rotierenX(195 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(40) {
  Farbe: #00aaff;
  transformieren: rotierenX(200 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(41) {
  Farbe: #0095ff;
  transformieren: rotierenX(205 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(42) {
  Farbe: #0080ff;
  transformieren: rotierenX(210 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(43) {
  Farbe: #006aff;
  transformieren: rotierenX(215 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(44) {
  Farbe: #0055ff;
  transformieren: rotierenX(220 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(45) {
  Farbe: #0040ff;
  transformieren: rotierenX(225 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(46) {
  Farbe: #002bff;
  transformieren: rotierenX(230 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(47) {
  Farbe: #0015ff;
  transformieren: rotierenX(235 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(48) {
  Farbe: blau;
  transformieren: rotierenX(240 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(49) {
  Farbe: #1500ff;
  transformieren: rotierenX(245 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(50) {
  Farbe: #2b00ff;
  transformieren: rotierenX(250 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(51) {
  Farbe: #4000ff;
  transformieren: rotierenX(255 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(52) {
  Farbe: #5500ff;
  transformieren: rotierenX(260 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(53) {
  Farbe: #6a00ff;
  transformieren: rotierenX(265 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(54) {
  Farbe: #8000ff;
  transformieren: rotierenX(270 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(55) {
  Farbe: #9500ff;
  transformieren: rotierenX(275 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(56) {
  Farbe: #aa00ff;
  transformieren: rotierenX(280 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(57) {
  Farbe: #bf00ff;
  transformieren: rotierenX(285 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(58) {
  Farbe: #d500ff;
  transformieren: rotierenX(290 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(59) {
  Farbe: #ea00ff;
  transformieren: rotierenX(295 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(60) {
  Farbe: Magenta;
  transformieren: rotierenX(300 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(61) {
  Farbe: #ff00ea;
  transformieren: rotierenX(305 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(62) {
  Farbe: #ff00d5;
  transformieren: rotierenX(310 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(63) {
  Farbe: #ff00bf;
  transformieren: rotierenX(315 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(64) {
  Farbe: #ff00aa;
  transformieren: rotierenX(320 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(65) {
  Farbe: #ff0095;
  transformieren: rotierenX(325 ​​Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(66) {
  Farbe: #ff0080;
  transformieren: rotierenX(330 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(67) {
  Farbe: #ff006a;
  transformieren: rotierenX(335 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(68) {
  Farbe: #ff0055;
  transformieren: rotierenX(340 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(69) {
  Farbe: #ff0040;
  transformieren: rotierenX(345 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(70) {
  Farbe: #ff002b;
  transformieren: rotierenX(350 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(71) {
  Farbe: #ff0015;
  transformieren: rotierenX(355 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(72) {
  Farbe: rot;
  transformieren: rotierenX(360 Grad) verschiebenY(-200px);
}

Oben sind die Details des von CSS3 implementierten 3D-Tunneleffekts aufgeführt. Weitere Informationen zum 3D-Tunneleffekt von CSS3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<: 

>>:  Was bedeutet das „a“ in rgba? CSS RGBA-Farbleitfaden

Artikel empfehlen

So fügen Sie eine Nginx-Proxy-Konfiguration hinzu, um nur internen IP-Zugriff zuzulassen

Standort / { Index Index.jsp; Proxy_next_upstream...

So verwenden Sie MySQL-Stresstest-Tools

1. MySQLs eigenes Stresstest-Tool – Mysqlslap mys...

So legen Sie die Position des Blockelements in der Mitte des Fensters fest

So legen Sie die Position des Blockelements in de...

Eine kurze Diskussion über die MySQL-Zeilenanzahl

Wir alle kennen die MySQL-Funktion count(), mit d...

Einführung in die Verwendung von CSS3-Farbwerten (RGBA) und Farbverlaufsfarben

Vor CSS3 konnten Verlaufsbilder nur als Hintergru...

Lösen Sie das Problem der automatischen HTML-Formatierung nach dem Speichern in vscode

Die Version von vsCode wurde in den letzten Tagen...

Eine kurze Analyse des Tutorials zur Installation von MySQL 8.0.18 auf CentOS 6.8 (RPM-Methode)

Heute werde ich aufzeichnen, wie man MySQL 8.0.18...

JavaScript zum Erzielen eines Texterweiterungs- und -reduzierungseffekts

Die Implementierung des Erweiterns und Reduzieren...

Einführung in den Swap-Speicher des Linux-Systems

Swap-Speicher ist heutzutage ein gängiger Aspekt ...

Detaillierte Erläuterung der Idee zur Implementierung dynamischer Effekte für die Änderung der Textfüllungsfarbe im Liedtext mit CSS3

Beim Abspielen von Musik werden die Liedtexte im ...

Zwei Möglichkeiten zum Starten des Linux-Bootdienstes

Inhaltsverzeichnis rc.local-Methode chkconfig-Met...

Maven-Projekte schneller in Docker erstellen

Inhaltsverzeichnis I. Überblick 2. Konventionelle...

Tutorial zur Oracle-Bereitstellung in einer Linux-Umgebung

1. Umgebung und zugehörige Software Virtuelle Mas...

So leiten Sie den Nginx-Verzeichnispfad um

Wenn der Pfad nach dem Domänennamen auf andere Ve...

Html+css, um reinen Text und Schaltflächen mit Symbolen zu erreichen

Dieser Artikel fasst die Implementierungsmethoden...