首页
所有分类
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 相关文章推荐
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
10种CSS3实现的loading动画，挑一个走吧？
Nov 16 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
用CSS3画一个爱心
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 #HTML / CSS
CSS 还能这样玩？奇思妙想渐变的艺术
css3 实现文字闪烁效果的三种方式示例代码
Css预编语言及区别详解
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 #HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
ctypes(1) python-pcl(1) Anaconda(2) 遍历文件夹(1) 历史记录(1) html标准库(1) 公共键(1) C/C++(1) dll(1) 有序排列(1)
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
详解Tensorflow数据读取有三种方式（next_batch）
2018/02/01 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
Python之字典对象的几种创建方法
2020/09/30 Python
经典C++面试题一
2016/11/06 面试题
会计出纳员的自我评价
2014/01/15 职场文书
自荐信格式简述
2014/01/25 职场文书
酒店员工检讨书
2014/02/18 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
委托书范本
2014/04/02 职场文书
会计实训总结范文
2015/08/03 职场文书
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android