首页
所有分类
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常用功能的写法
Jun 05 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 HTML / CSS
css清除浮动clearfix:after的用法详解（附完整代码）
May 21 HTML / CSS
用CSS3画一个爱心
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 #HTML / CSS
CSS 还能这样玩？奇思妙想渐变的艺术
css3 实现文字闪烁效果的三种方式示例代码
Css预编语言及区别详解
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 #HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
阿联酋购物网站(26) 波兰购物网站(52) 斯洛伐克购物网站(7) 新西兰购物网站(42) 土耳其购物网站(10) 捷克购物网站(26) 奥地利购物网站(28) 智利购物网站(5) 卡塔尔购物网站(3) 沙特阿拉伯购物网站(9)
You might like
在字符串中把网址改成超级链接
2006/10/09 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
php伪静态之APACHE篇
2014/06/02 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
python下10个简单实例代码
2017/11/15 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
python 实现性别识别
2020/11/21 Python
python中remove函数的踩坑记录
2021/01/04 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
AVI-8手表美国官方商店：AVI-8 USA
2019/04/10 全球购物
饿了么订餐官网：外卖、网上订餐
2019/06/28 全球购物
Fabletics官网：美国运动服饰品牌，由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
超市营业员岗位职责
2013/12/20 职场文书
个人求职信范文分享
2014/01/31 职场文书
超市中秋节活动方案
2014/02/12 职场文书
班主任自我评价范文
2015/03/11 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
安全教育第一课观后感
2015/06/17 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python