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
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); (编辑:宿州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |