css实现全息轨道形三维炫酷步骤条效果代码
代码语言:html
所属分类:三维
代码描述:css实现全息轨道形三维炫酷步骤条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } html, body { width: 100vw; height: 100vh; overflow: hidden; } body { line-height: 1.2rem; font-family: 'dosislight'; color: #fefefe; background-color: #11171d; box-shadow: inset 0 8em 16em -8em black; display: flex; align-items: center; justify-content: center; } .floor:after { content: ''; width: 50em; height: 25em; position: absolute; left: 50%; top: -80%; z-index: -1; transform: translate(-50%, -50%) rotateX(30deg) translateZ(-4em); background-image: radial-gradient(rgba(36, 49, 61, 0), #11171d 15em), radial-gradient(rgba(112, 230, 255, 0.2), rgba(0, 0, 0, 0)), linear-gradient(rgba(112, 230, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, transparent calc(100% - 1px), rgba(112, 230, 255, 0.1) calc(100% - 1px)), linear-gradient(90deg, #11171d calc(100% - 1px), transparent calc(100% - 1px)), linear-gradient(rgba(112, 230, 255, 0.5) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 6em 3em, 6em 3em, 6em 3em, 6em 3em; background-position: top center; } .proxz-nav { transform-style: preserve-3d; } .proxz-nav__system { perspective: 900px; position: relative; z-index: 1; } .proxz-nav__orbit, .proxz-nav__orbit:before, .proxz-nav__satellite { border-radius: 50%; position: absolute; left: 50%; top: 50%; } .proxz-nav__orbit { z-index: 10; transform-style: preserve-3d; transform-origin: 50% 50%; display: flex; align-items: center; } /* ************************************************** step1 starts here ************************************************** */ .proxz-nav__orbit:nth-child(1) { width: 300px; height: 300px; z-index: 5; transform: translate(-50%, -50%) translateY(-110px) rotateX(65deg); } .proxz-nav__orbit:nth-child(1) .proxz-nav__label, .proxz-nav__orbit:nth-child(1) .proxz-nav__satellite, .proxz-nav__orbit:nth-child(1) .proxz-nav__satellite:before { -webkit-animation-duration: 38s; animation-duration: 38s; } .proxz-nav__orbit:nth-child(1) .proxz-nav__satellite:before { background-color: #70ffdb; } .proxz-nav__orbit:nth-child(1) .proxz-nav__label { color: #70ffdb; } .proxz-nav__orbit:nth-child(1) .proxz-nav__label:before { content: "01"; color: rgba(254, 254, 254, 0.75); padding-right: 8px; } /* ************************************************** step2 starts here ************************************************** */ .proxz-nav__orbit:nth-child(2) { width: 400px; height: 400px; z-index: 4; transform: translate(-50%, -50%) translateY(-80px) rotateX(65deg); } .proxz-nav__orbit:nth-child(2) .proxz-nav__label, .proxz-nav__orbit:nth-child(2) .proxz-nav__satellite, .proxz-nav__orbit:nth-child(2) .proxz-nav__satellite:before { -webkit-animation-duration: 36s; animation-duration: 36s; } .proxz-nav__orbit:nth-child(2) .proxz-nav__satellite:before { background-color: #70ffa0; } .proxz-nav__orbit:nth-child(2) .proxz-nav__label { color: #70ffa0; } .proxz-nav__orbit:nth-child(2) .proxz-nav__label:before { content: "02"; color: rgba(254, 254, 254, 0.75); padding-right: 8px; } /* ************************************************** step3 starts here ************************************************** */ .proxz-nav__orbit:nth-child(3) { width: 500px; height: 500px; z-index: 3; transform: translate(-50%, -50%) translateY(-50px) rotateX(65deg); } .proxz-nav__orbit:nth-child(3) .proxz-nav__label, .proxz-nav__orbit:nth-child(3) .proxz-nav__satellite, .proxz-nav__orbit:nth-child(3) .proxz-nav__satellite:before { -webkit-animation-duration: 34s; animation-duration: 34s; } .proxz-nav__orbit:nth-child(3) .proxz-nav__satellite:before { background-color: #7cff70; } .proxz-nav__orbit:nth-child(3) .proxz-nav__label { color: #7cff70; } .proxz-nav__orbit:nth-child(3) .proxz-nav__label:before { content: "03"; color: rgba(254, 254, 254, 0.75); padding-right: 8px; } /* ************************************************** step4 starts here ************************************************** */ .proxz-nav__orbit:nth-child(4) { width: 500px; height: 500px; z-index: 2; transform: translate(-50%, -50%) translateY(0px) rotateX(65deg); } .proxz-nav__orbit:nth-child(4) .proxz-nav__label, .proxz-nav__orbit:nth-child(4) .proxz-nav__satellite, .proxz-nav__orbit:nth-child(4) .proxz-nav__satellite:before { -webkit-animation-duration: 32s; animation-duration: 32s; } .proxz-nav__orbit:nth-child(4) .proxz-nav__satellite:before { background-color: #b8ff70; } .proxz-nav__orbit:nth-child(4) .proxz-nav__label { color: #b8ff70; } .proxz-nav__orbit:nth-child(4) .proxz-nav__label:before { content: "04"; color: rgba(254, 254, 254, 0.75); padding-right: 8px; } /* ************************************************** step5 starts here ************************************************** */ .proxz-nav__orbit:nth-child(5) { width: 400px; height: 400px; z-index: 1; transform: translate(-50%, -50%) translateY(50px) rotateX(65deg); } .proxz-nav__orbit:nth-child(5) .proxz-nav__label, .proxz-nav__orbit:nth-child(5) .proxz-nav__satellite, .proxz-nav__orbit:nth-child(5) .proxz-nav__satellite:before { -webkit-animation-duration: 30s; animation-duration: 30s; } .proxz-nav__orbit:nth-child(5) .proxz-nav__satellite:before { background-color: #f3ff70; } .proxz-nav__orbit:nth-child(5) .proxz-nav__label { color: #f3ff70; } .proxz-nav__orbit:nth-child(5) .proxz-nav__label:before { content: "05"; color: rgba(254, 254, 254, 0.75); padding-right: 8px; } /* ************************************************** step6 starts here *********************************.........完整代码请登录后点击上方下载按钮下载查看
网友评论0