首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3实现的3D隧道效果

Posted in HTML / CSS onApril 27, 2021

实现的效果

CSS3实现的3D隧道效果

实现代码

html

<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>

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隧道效果

- Author -

jeomi

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
CSS3制作精致的照片墙特效
Jun 07 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
用CSS3画一个爱心
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 #HTML / CSS
CSS 还能这样玩？奇思妙想渐变的艺术
css3 实现文字闪烁效果的三种方式示例代码
Css预编语言及区别详解
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 #HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
LINUX面试题(83) EJB面试题(46) Javascript面试题(44) .NET面试题(131) Oracle面试题(81) 软件测试工程师面试题(53) C#面试题(90) 软件工程师面试题(40) DB面试题(126) 网络工程师面试题(96)
You might like
Ajax PHP分页演示
2007/01/02 PHP
五个PHP程序员工具
2008/05/26 PHP
常用的PHP数据库操作方法（MYSQL版）
2011/06/08 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
JS 实现计算器详解及实例代码（一）
2017/01/08 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
python杀死一个线程的方法
2015/09/06 Python
Pycharm学习教程（3） 代码运行调试
2017/05/03 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python获取时间戳代码实例
2019/09/24 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
全天然狗零食：Best Bully Sticks
2016/09/22 全球购物
爱心捐款倡议书范文
2014/05/12 职场文书
公司活动总结范文
2014/07/01 职场文书
百日安全生产活动总结
2014/07/05 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers