css3滤镜过渡效果代码(CSS3实现的3D隧道效果)
类别:Web前端 浏览量:308
时间:2022-01-24 00:37:01 css3滤镜过渡效果代码
CSS3实现的3D隧道效果实现的效果 实现代码html
<li class="scene"> <li 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> </li> </li>
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粒子特效(利用CSS3实现毛玻璃效果示例源码)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- css3怎么构建阴影(详解css3 mask遮罩实现一些特效)
- html5+css3动画效果图(纯DOM+CSS3实现简单的小风车动画)
- css3 图片边框(css3图片边框border-image的用法)
- css3引导动画教程(详解Css3新特性应用之过渡与动画)
- 简述css3动画与过渡效果(CSS3制作翻转效果_动力节点Java学院整理)
- JavaScript css3实现简单视频弹幕功能(JavaScript css3实现简单视频弹幕功能)
- css3渐变放大功能(CSS3 渐变Gradients之CSS3 线性渐变)
- css3动画怎么实现的(css3中用animation的steps属性制作帧动画)
- css flex布局教程(详解CSS3伸缩布局盒模型Flex布局)
- css3渐变背景教程(css3实现背景图片颜色修改的多种方式)
- css3基础选择器有哪些(对CSS3选择器的研究详解)
- css3字体怎么写(css3个性化字体_动力节点Java学院整理)
- CSS3动画属性animation
- css3各个动画效果(使用css3制作齿轮loading动画效果)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
- 今年考高会很难吗(今年高考会考试吗)
- 盘古开天地 他创造了世界,谁创造了盘古 盘古是伏羲吗(盘古开天地他创造了世界)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
- 冬天来了手脚冰凉 真不是因为上辈子你是折翼的天使(冬天来了手脚冰凉)
- 0 1 岁婴儿最强作息指南,照着做养出天使宝宝(01岁婴儿最强作息指南)
热门推荐
- sqlserver2012海量数据查询(SQL Server 2012 多表连接查询功能实例代码)
- vue全局配置文件env(vue项目多环境配置.env的实现)
- phpstudy服务器怎么设置(phpstudy本地环境开启.htaccess伪静态方法)
- python3.8基本操作(Python3.5文件修改操作实例分析)
- react绑定详解(React列表栏及购物车组件使用详解)
- html5input标签的默认属性(移动端HTML5 input常见问题小结)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- 一个sql查询数据多表连接查询(一条SQL语句查询多个数据库)
- sql服务器停止后无法启动(SQL服务器无法启动的解决方法)
- 如何使用rem开发移动端页面(移动端rem布局的两种实现方法)