经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
CSS3实现的3D隧道效果_css3_CSS
来源：jb51　　时间：2021/5/6 19:39:13　　对本文有异议

实现的效果

实现代码

html

  1. <div class="scene">
  2.   <div class="wrapper">
  3.     <ul class="tunnel">
  4.       <li class="ring"></li>
  5.       <li class="ring"></li>
  6.       <li class="ring"></li>
  7.       <li class="ring"></li>
  8.       <li class="ring"></li>
  9.       <li class="ring"></li>
  10.       <li class="ring"></li>
  11.       <li class="ring"></li>
  12.       <li class="ring"></li>
  13.       <li class="ring"></li>
  14.       <li class="ring"></li>
  15.       <li class="ring"></li>
  16.       <li class="ring"></li>
  17.       <li class="ring"></li>
  18.       <li class="ring"></li>
  19.       <li class="ring"></li>
  20.       <li class="ring"></li>
  21.       <li class="ring"></li>
  22.       <li class="ring"></li>
  23.       <li class="ring"></li>
  24.       <li class="ring"></li>
  25.       <li class="ring"></li>
  26.       <li class="ring"></li>
  27.       <li class="ring"></li>
  28.       <li class="ring"></li>
  29.       <li class="ring"></li>
  30.       <li class="ring"></li>
  31.       <li class="ring"></li>
  32.       <li class="ring"></li>
  33.       <li class="ring"></li>
  34.       <li class="ring"></li>
  35.       <li class="ring"></li>
  36.       <li class="ring"></li>
  37.       <li class="ring"></li>
  38.       <li class="ring"></li>
  39.       <li class="ring"></li>
  40.       <li class="ring"></li>
  41.       <li class="ring"></li>
  42.       <li class="ring"></li>
  43.       <li class="ring"></li>
  44.       <li class="ring"></li>
  45.       <li class="ring"></li>
  46.       <li class="ring"></li>
  47.       <li class="ring"></li>
  48.       <li class="ring"></li>
  49.       <li class="ring"></li>
  50.       <li class="ring"></li>
  51.       <li class="ring"></li>
  52.       <li class="ring"></li>
  53.       <li class="ring"></li>
  54.       <li class="ring"></li>
  55.       <li class="ring"></li>
  56.       <li class="ring"></li>
  57.       <li class="ring"></li>
  58.       <li class="ring"></li>
  59.       <li class="ring"></li>
  60.       <li class="ring"></li>
  61.       <li class="ring"></li>
  62.       <li class="ring"></li>
  63.       <li class="ring"></li>
  64.       <li class="ring"></li>
  65.       <li class="ring"></li>
  66.       <li class="ring"></li>
  67.       <li class="ring"></li>
  68.       <li class="ring"></li>
  69.       <li class="ring"></li>
  70.       <li class="ring"></li>
  71.       <li class="ring"></li>
  72.       <li class="ring"></li>
  73.       <li class="ring"></li>
  74.       <li class="ring"></li>
  75.       <li class="ring"></li>
  76.     </ul>
  77.   </div>
  78. </div>

css3

  1. @keyframes roundandround {
  2.   to {
  3.     transform: rotateX(360deg);
  4.   }
  5. }
  6. body {
  7.   background-color: #000000;
  8. }
  9.  
  10. .scene {
  11.   width: 600px;
  12.   height: 600px;
  13.   margin: 0 auto;
  14.   perspective: 500px;
  15. }
  16.  
  17. .wrapper {
  18.   width: 100%;
  19.   height: 100%;
  20.   transform-style: preserve-3d;
  21.   transform: rotateY(0deg) translateZ(300px);
  22. }
  23.  
  24. .tunnel {
  25.   position: relative;
  26.   width: 200px;
  27.   height: 200px;
  28.   margin: 0 auto;
  29.   transform-style: preserve-3d;
  30.   animation: roundandround 10s infinite linear;
  31. }
  32.  
  33. .tunnel .ring {
  34.   position: absolute;
  35.   top: 0;
  36.   left: 0;
  37.   width: 100%;
  38.   height: 100%;
  39.   border: 6px;
  40.   border-style: dashed;
  41.   border-radius: 50%;
  42.   transform-origin: 50% 50%;
  43.   color: #8df435;
  44.   transform: translateY(-200px);
  45. }
  46.  
  47. /* SASS optimisation thanks to @imjared */
  48. .ring:nth-child(1) {
  49.   color: #ff1500;
  50.   transform: rotateX(5deg) translateY(-200px);
  51. }
  52.  
  53. .ring:nth-child(2) {
  54.   color: #ff2b00;
  55.   transform: rotateX(10deg) translateY(-200px);
  56. }
  57.  
  58. .ring:nth-child(3) {
  59.   color: #ff4000;
  60.   transform: rotateX(15deg) translateY(-200px);
  61. }
  62.  
  63. .ring:nth-child(4) {
  64.   color: #ff5500;
  65.   transform: rotateX(20deg) translateY(-200px);
  66. }
  67.  
  68. .ring:nth-child(5) {
  69.   color: #ff6a00;
  70.   transform: rotateX(25deg) translateY(-200px);
  71. }
  72.  
  73. .ring:nth-child(6) {
  74.   color: #ff8000;
  75.   transform: rotateX(30deg) translateY(-200px);
  76. }
  77.  
  78. .ring:nth-child(7) {
  79.   color: #ff9500;
  80.   transform: rotateX(35deg) translateY(-200px);
  81. }
  82.  
  83. .ring:nth-child(8) {
  84.   color: #ffaa00;
  85.   transform: rotateX(40deg) translateY(-200px);
  86. }
  87.  
  88. .ring:nth-child(9) {
  89.   color: #ffbf00;
  90.   transform: rotateX(45deg) translateY(-200px);
  91. }
  92.  
  93. .ring:nth-child(10) {
  94.   color: #ffd500;
  95.   transform: rotateX(50deg) translateY(-200px);
  96. }
  97.  
  98. .ring:nth-child(11) {
  99.   color: #ffea00;
  100.   transform: rotateX(55deg) translateY(-200px);
  101. }
  102.  
  103. .ring:nth-child(12) {
  104.   color: yellow;
  105.   transform: rotateX(60deg) translateY(-200px);
  106. }
  107.  
  108. .ring:nth-child(13) {
  109.   color: #eaff00;
  110.   transform: rotateX(65deg) translateY(-200px);
  111. }
  112.  
  113. .ring:nth-child(14) {
  114.   color: #d5ff00;
  115.   transform: rotateX(70deg) translateY(-200px);
  116. }
  117.  
  118. .ring:nth-child(15) {
  119.   color: #bfff00;
  120.   transform: rotateX(75deg) translateY(-200px);
  121. }
  122.  
  123. .ring:nth-child(16) {
  124.   color: #aaff00;
  125.   transform: rotateX(80deg) translateY(-200px);
  126. }
  127.  
  128. .ring:nth-child(17) {
  129.   color: #95ff00;
  130.   transform: rotateX(85deg) translateY(-200px);
  131. }
  132.  
  133. .ring:nth-child(18) {
  134.   color: #80ff00;
  135.   transform: rotateX(90deg) translateY(-200px);
  136. }
  137.  
  138. .ring:nth-child(19) {
  139.   color: #6aff00;
  140.   transform: rotateX(95deg) translateY(-200px);
  141. }
  142.  
  143. .ring:nth-child(20) {
  144.   color: #55ff00;
  145.   transform: rotateX(100deg) translateY(-200px);
  146. }
  147.  
  148. .ring:nth-child(21) {
  149.   color: #40ff00;
  150.   transform: rotateX(105deg) translateY(-200px);
  151. }
  152.  
  153. .ring:nth-child(22) {
  154.   color: #2bff00;
  155.   transform: rotateX(110deg) translateY(-200px);
  156. }
  157.  
  158. .ring:nth-child(23) {
  159.   color: #15ff00;
  160.   transform: rotateX(115deg) translateY(-200px);
  161. }
  162.  
  163. .ring:nth-child(24) {
  164.   color: lime;
  165.   transform: rotateX(120deg) translateY(-200px);
  166. }
  167.  
  168. .ring:nth-child(25) {
  169.   color: #00ff15;
  170.   transform: rotateX(125deg) translateY(-200px);
  171. }
  172.  
  173. .ring:nth-child(26) {
  174.   color: #00ff2b;
  175.   transform: rotateX(130deg) translateY(-200px);
  176. }
  177.  
  178. .ring:nth-child(27) {
  179.   color: #00ff40;
  180.   transform: rotateX(135deg) translateY(-200px);
  181. }
  182.  
  183. .ring:nth-child(28) {
  184.   color: #00ff55;
  185.   transform: rotateX(140deg) translateY(-200px);
  186. }
  187.  
  188. .ring:nth-child(29) {
  189.   color: #00ff6a;
  190.   transform: rotateX(145deg) translateY(-200px);
  191. }
  192.  
  193. .ring:nth-child(30) {
  194.   color: #00ff80;
  195.   transform: rotateX(150deg) translateY(-200px);
  196. }
  197.  
  198. .ring:nth-child(31) {
  199.   color: #00ff95;
  200.   transform: rotateX(155deg) translateY(-200px);
  201. }
  202.  
  203. .ring:nth-child(32) {
  204.   color: #00ffaa;
  205.   transform: rotateX(160deg) translateY(-200px);
  206. }
  207.  
  208. .ring:nth-child(33) {
  209.   color: #00ffbf;
  210.   transform: rotateX(165deg) translateY(-200px);
  211. }
  212.  
  213. .ring:nth-child(34) {
  214.   color: #00ffd5;
  215.   transform: rotateX(170deg) translateY(-200px);
  216. }
  217.  
  218. .ring:nth-child(35) {
  219.   color: #00ffea;
  220.   transform: rotateX(175deg) translateY(-200px);
  221. }
  222.  
  223. .ring:nth-child(36) {
  224.   color: cyan;
  225.   transform: rotateX(180deg) translateY(-200px);
  226. }
  227.  
  228. .ring:nth-child(37) {
  229.   color: #00eaff;
  230.   transform: rotateX(185deg) translateY(-200px);
  231. }
  232.  
  233. .ring:nth-child(38) {
  234.   color: #00d5ff;
  235.   transform: rotateX(190deg) translateY(-200px);
  236. }
  237.  
  238. .ring:nth-child(39) {
  239.   color: deepskyblue;
  240.   transform: rotateX(195deg) translateY(-200px);
  241. }
  242.  
  243. .ring:nth-child(40) {
  244.   color: #00aaff;
  245.   transform: rotateX(200deg) translateY(-200px);
  246. }
  247.  
  248. .ring:nth-child(41) {
  249.   color: #0095ff;
  250.   transform: rotateX(205deg) translateY(-200px);
  251. }
  252.  
  253. .ring:nth-child(42) {
  254.   color: #0080ff;
  255.   transform: rotateX(210deg) translateY(-200px);
  256. }
  257.  
  258. .ring:nth-child(43) {
  259.   color: #006aff;
  260.   transform: rotateX(215deg) translateY(-200px);
  261. }
  262.  
  263. .ring:nth-child(44) {
  264.   color: #0055ff;
  265.   transform: rotateX(220deg) translateY(-200px);
  266. }
  267.  
  268. .ring:nth-child(45) {
  269.   color: #0040ff;
  270.   transform: rotateX(225deg) translateY(-200px);
  271. }
  272.  
  273. .ring:nth-child(46) {
  274.   color: #002bff;
  275.   transform: rotateX(230deg) translateY(-200px);
  276. }
  277.  
  278. .ring:nth-child(47) {
  279.   color: #0015ff;
  280.   transform: rotateX(235deg) translateY(-200px);
  281. }
  282.  
  283. .ring:nth-child(48) {
  284.   color: blue;
  285.   transform: rotateX(240deg) translateY(-200px);
  286. }
  287.  
  288. .ring:nth-child(49) {
  289.   color: #1500ff;
  290.   transform: rotateX(245deg) translateY(-200px);
  291. }
  292.  
  293. .ring:nth-child(50) {
  294.   color: #2b00ff;
  295.   transform: rotateX(250deg) translateY(-200px);
  296. }
  297.  
  298. .ring:nth-child(51) {
  299.   color: #4000ff;
  300.   transform: rotateX(255deg) translateY(-200px);
  301. }
  302.  
  303. .ring:nth-child(52) {
  304.   color: #5500ff;
  305.   transform: rotateX(260deg) translateY(-200px);
  306. }
  307.  
  308. .ring:nth-child(53) {
  309.   color: #6a00ff;
  310.   transform: rotateX(265deg) translateY(-200px);
  311. }
  312.  
  313. .ring:nth-child(54) {
  314.   color: #8000ff;
  315.   transform: rotateX(270deg) translateY(-200px);
  316. }
  317.  
  318. .ring:nth-child(55) {
  319.   color: #9500ff;
  320.   transform: rotateX(275deg) translateY(-200px);
  321. }
  322.  
  323. .ring:nth-child(56) {
  324.   color: #aa00ff;
  325.   transform: rotateX(280deg) translateY(-200px);
  326. }
  327.  
  328. .ring:nth-child(57) {
  329.   color: #bf00ff;
  330.   transform: rotateX(285deg) translateY(-200px);
  331. }
  332.  
  333. .ring:nth-child(58) {
  334.   color: #d500ff;
  335.   transform: rotateX(290deg) translateY(-200px);
  336. }
  337.  
  338. .ring:nth-child(59) {
  339.   color: #ea00ff;
  340.   transform: rotateX(295deg) translateY(-200px);
  341. }
  342.  
  343. .ring:nth-child(60) {
  344.   color: magenta;
  345.   transform: rotateX(300deg) translateY(-200px);
  346. }
  347.  
  348. .ring:nth-child(61) {
  349.   color: #ff00ea;
  350.   transform: rotateX(305deg) translateY(-200px);
  351. }
  352.  
  353. .ring:nth-child(62) {
  354.   color: #ff00d5;
  355.   transform: rotateX(310deg) translateY(-200px);
  356. }
  357.  
  358. .ring:nth-child(63) {
  359.   color: #ff00bf;
  360.   transform: rotateX(315deg) translateY(-200px);
  361. }
  362.  
  363. .ring:nth-child(64) {
  364.   color: #ff00aa;
  365.   transform: rotateX(320deg) translateY(-200px);
  366. }
  367.  
  368. .ring:nth-child(65) {
  369.   color: #ff0095;
  370.   transform: rotateX(325deg) translateY(-200px);
  371. }
  372.  
  373. .ring:nth-child(66) {
  374.   color: #ff0080;
  375.   transform: rotateX(330deg) translateY(-200px);
  376. }
  377.  
  378. .ring:nth-child(67) {
  379.   color: #ff006a;
  380.   transform: rotateX(335deg) translateY(-200px);
  381. }
  382.  
  383. .ring:nth-child(68) {
  384.   color: #ff0055;
  385.   transform: rotateX(340deg) translateY(-200px);
  386. }
  387.  
  388. .ring:nth-child(69) {
  389.   color: #ff0040;
  390.   transform: rotateX(345deg) translateY(-200px);
  391. }
  392.  
  393. .ring:nth-child(70) {
  394.   color: #ff002b;
  395.   transform: rotateX(350deg) translateY(-200px);
  396. }
  397.  
  398. .ring:nth-child(71) {
  399.   color: #ff0015;
  400.   transform: rotateX(355deg) translateY(-200px);
  401. }
  402.  
  403. .ring:nth-child(72) {
  404.   color: red;
  405.   transform: rotateX(360deg) translateY(-200px);
  406. }

以上就是CSS3实现的3D隧道效果的详细内容，更多关于CSS3 3D隧道效果的资料请关注w3xue其它相关文章！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号