CSS3实现的3D隧道效果

HTML教程 • 2026-03-21

实现的效果

实现代码

html

  
    
          
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •       
  •

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隧道效果的资料请关注本站其它相关文章！

相关文章

css – 如何将自定义TrueType字体打包到网站,以便浏览器呈现它？

2026-03-29

CSS Border RADIUS,这是正确使用的样式吗？边界半径？ -webkit-边界半径？ -moz-边界半

2026-03-29

是否可以使用CSS制作这样的无序列表？

2026-03-29

如何规范雷达图的统计数据

2026-03-29

推荐阅读

漫蛙manwa2最新链接-漫蛙manwa2官网入口直达

2026-03-22

css3 实现文字闪烁效果的三种方式示例代码

2026-03-21

position:sticky 粘性定位的几种巧妙应用详解

2026-03-29

用CSS实现图片的3D凹凸感(凸出镜框外或凹陷镜框里)

2026-03-29