css3的3d效果如何完成?一文教你用css3做3D隧道
发布时间:2022-01-20 16:31:36 所属栏目:编程 来源:互联网
导读:在CSS3中,我们可以实现3D的效果,但是一些刚接触CSS3的朋友,可能不知道css3的3d效果该怎样做,因此这篇文章就给大家分享一下用css3做3D隧道效果的示例,感兴趣的朋友可以参考,接下来我们一起看看吧。 实现代码 html div class=scene div class=wrapper ul
在CSS3中,我们可以实现3D的效果,但是一些刚接触CSS3的朋友,可能不知道css3的3d效果该怎样做,因此这篇文章就给大家分享一下用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%; (编辑:宿州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |