<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pure CSS Steps</title> <style type="text/css"> 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; } body { font-family: "Open Sans", sans-serif; font-size: 16px; text-align: center; color: #444; background: #d0d0d0; } header { margin-bottom: 2em; } h1 { font-size: 2em; margin: 2em 0 1em; } strong { font-weight: 700; } p { line-height: 1.4em; } article header { margin: 0; } .full-height { height: 26em; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flexy-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; } .flexy-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flexy-column.reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .flexy-item_child { -webkit-box-flex: 1; -webkit-flex: 1 0 100%; -ms-flex: 1 0 100%; flex: 1 0 100%; } .pure-steps { display: inline-block; width: 20em; color: white; margin-bottom: 3em; } .pure-steps strong { color: #B2FF41; font-weight: 300; } .pure-steps .pure-steps_group { position: relative; min-height: 26em; border-radius: .4em; overflow: hidden; box-shadow: 0 1.7em 5.5em -0.94em rgba(0, 0, 0, 0.3), 0 2em 3em 0.5em rgba(0, 0, 0, 0.1), 0 1.8em 2em -1.5em rgba(0, 0, 0, 0.2); background-image: -webkit-linear-gradient(210deg, #26e289 0%, #1a5fa2 100%, #ff0000 200%); background-image: linear-gradient(-120deg, #26e289 0%, #1a5fa2 100%, #ff0000 200%); background-position: 0 0; background-size: 300%; will-change: background, box-shadow; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .pure-steps .pure-steps_group .pure-steps_group-step { position: absolute; left: 0; top: 0; width: 100%; -webkit-transform: translate(100%); transform: translate(100%); opacity: 0; will-change: transform, opacity; -webkit-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; text-align: left; } .pure-steps .pure-steps_group .pure-steps_group-step:last-child { text-align: center; } .pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_legend { font-size: 1.5em; font-weight: 700; padding: 1.5em 1.34em 1em; line-height: 1em; position: relative; } .pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item { padding: 0 2em 1em; } .pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item label { font-size: .8em; display: block; opacity: .6; } .pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input { font-size: 1em; box-sizing: border-box; width: 100%; border: 0; line-height: 1.5em; background-color: transparent; background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #e5e5e5 1px), -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #b2ff41 1px); background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #e5e5e5 1px), linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #b2ff41 1px); background-size: 100% 1px, 0% 1px; background-repeat: no-repeat; outline: none; will-change: background; -webkit-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; color: white; font-family: "Open Sans", sans-serif; font-weight: 300; } .pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input:focus { color: white; background-size: 0% 1px, 100% 1px; } .pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input:focus + label { opacity: 1; color: #B2FF41; } .pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } .pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input:-moz-placeholder { /* Firefox 18- */ color: rgba(255, 255, 255, 0.6); } .pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input::-moz-placeholder { /* Firefox 19+ */ color: rgba(255, 255, 255, 0.6); } .pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } .pure-steps .pure-steps_radio { display: none; } .pure-steps .pure-steps_group-triggers { position: absolute; left: 0; bottom: 0; width: 100%; height: 3.6em; border-radius: 0 0 .4em .4em; background-color: rgba(0, 0, 0, 0.1); will-change: opacity; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .pure-steps .pure-steps_group-triggers:before { content: ''; display: inline-block; position: absolute; left: 0; width: 0%; height: .1em; background: rgba(178, 255, 65, 0.4); will-change: width; -webkit-transition: width 0.6s ease-in-out; transition: width 0.6s ease-in-out; } .pure-steps .pure-steps_group-triggers .pure-steps_group-triggers_item { display: none; } .pure-steps .pure-steps_group-triggers .pure-steps_group-triggers_item label { display: block; padding: 1.2em; color: white; } .pure-steps .pure-steps_radio:nth-child(1):checked ~ .pure-steps_group { background-position: 25% 0; } .pure-steps .pure-steps_radio:nth-child(1):checked ~ .pure-steps_group .pure-steps_group-triggers:before { width: 33.333%; } .pure-steps .pure-steps_radio:nth-child(1):checked ~ .pure-steps_group .pure-steps_group-triggers .pure-steps_group-triggers_item:nth-child(2) { display: block; } .pure-steps .pure-steps_radio:nth-child(1):checked ~ .pure-steps_group .pure-steps_group-step:nth-child(1) { opacity: 1; -webkit-transform: translate(0); transform: translate(0); } .pure-steps .pure-steps_radio:nth-child(2):checked ~ .pure-steps_group { background-position: 50% 0; } .pure-steps .pure-steps_radio:nth-child(2):checked ~ .pure-steps_group .pure-steps_group-triggers:before { width: 66.666%; } .pure-steps .pure-steps_radio:nth-child(2):checked ~ .pure-steps_group .pure-steps_group-triggers .pure-steps_group-triggers_item:nth-child(3) { display: block; } .pure-steps .pure-steps_radio:nth-child(2):checked ~ .pure-steps_group .pure-steps_group-step:nth-child(2) { opacity: 1; -webkit-transform: translate(0); transform: translate(0); } .pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group { background-position: 75% 0; } .pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-triggers { opacity: 0; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-step { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; } .pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-step .pure-steps_preload { display: block; height: .1em; width: 100%; box-sizing: border-box; margin: 0 2em; background-image: -webkit-linear-gradient(90deg, rgba(255, 59, 153, 0.4) 0%, rgba(255, 157, 0, 0.4) 50%, rgba(178, 255, 65, 0.4) 100%); background-image: linear-gradient(0deg, rgba(255, 59, 153, 0.4) 0%, rgba(255, 157, 0, 0.4) 50%, rgba(178, 255, 65, 0.4) 100%); background-size: 0 10em; background-position: top center; background-repeat: no-repeat; will-change: background-image; -webkit-transition: background-image 3s linear; transition: background-image 3s linear; -webkit-animation: preloadLine 3s ease-out forwards; animation: preloadLine 3s ease-out forwards; } .pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-step .pure-steps_preload svg { font-size: 1.2em; width: auto; height: 1em; padding: 1em; border-radius: 2em; background-color: #5BD670; fill: white; margin-top: -1.5em; -webkit-transform: scale(0); transform: scale(0); -webkit-animation: preloadTic .8s linear forwards; animation: preloadTic .8s linear forwards; -webkit-animation-delay: 3s; animation-delay: 3s; } .pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-triggers:before { width: 99.999%; } .pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-triggers .pure-steps_group-triggers_item:nth-child(4) { display: block; } .pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-step:nth-child(3) { opacity: 1; -webkit-transform: translate(0); transform: translate(0); } @-webkit-keyframes preloadLine { 0% { background-position: bottom center; background-size: 0 10em; } 100% { background-position: top center; background-size: 100% 10em; } } @keyframes preloadLine { 0% { background-position: bottom center; background-size: 0 10em; } 100% { background-position: top center; background-size: 100% 10em; } } @-webkit-keyframes preloadTic { 0% { -webkit-transform: scale(0); transform: scale(0); } 20% { -webkit-transform: scale(0.2); transform: scale(0.2); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: scale(1.3); transform: scale(1.3); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 80%, 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes preloadTic { 0% { -webkit-transform: scale(0); transform: scale(0); } 20% { -webkit-transform: scale(0.2); transform: scale(0.2); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: scale(1.3); transform: scale(1.3); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 80%, 100% { -webkit-transform: scale(1); transform: scale(1); } } </style> </head> <body> <header> <h1>Pure <strong>CSS</strong> Steps</h1> <p>... a sassy "Step By Step" process.</p> </header> <section> <article> <form class="pure-steps"> <input type="radio" name="steps" class="pure-steps_radio" id="step-0" checked=""> <input type="radio" name="steps" class="pure-steps_radio" id="step-1"> <input type="radio" name="steps" class="pure-steps_radio" id="step-2"> <div class="pure-steps_group"> <ol> <li class="pure-steps_group-step"> <header> <h2 class="pure-steps_group-step_legend">Welcome</h2> <p class="pure-steps_group-step_item">The <strong>"Step By Step"</strong> pattern is usually 100% developed with JavaScript but you can use CSS too.</p> <p class="pure-steps_group-step_item">Enjoy this example of "what can be done" <strong>just with SASS,</strong> simulating a "sign-up" process.</p> <p class="pure-steps_group-step_item"></p> </header> </li> <li class="pure-steps_group-step"> <fieldset> <legend class="pure-steps_group-step_legend">Sign Up</legend> <p class="pure-steps_group-step_item flexy-item flexy-column reverse"> <input type="text" placeholder="Type your email here" value="" id="input_email"> <label for="input_email">Email</label> </p> <p class="pure-steps_group-step_item flexy-item flexy-column reverse"> <input type="text" placeholder="Type your nick here" value="" id="input_nick"> <label for="input_nick">Nick</label> </p> <p class="pure-steps_group-step_item flexy-item flexy-column reverse"> <input type="password" placeholder="Type your password here" value="" id="input_password"> <label for="input_password">Password</label> </p> </fieldset> </li> <li class="pure-steps_group-step flexy-item"> <div class="pure-steps_preload"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"> <path d="M31.8,3.6c-0.2-0.5-0.4-0.9-0.9-1.2C30.4,2,29.7,1.8,29,1.9c-0.6,0.1-1.2,0.4-1.6,1l-8.5,11.2l0,0l-7.2,9.5l-7.1-9.4 c-0.5-0.7-1.3-1-2.1-1c-0.5,0-1,0.2-1.4,0.5c-0.5,0.4-0.9,1-1,1.7s0.1,1.2,0.5,1.8l9.1,12.1l0,0c0.1,0.2,0.3,0.3,0.4,0.4 c0.4,0.3,0.9,0.5,1.4,0.5c0.8,0,1.6-0.3,2.1-1L22.1,18l0,0l9.1-12.1C32,5.2,32.1,4.4,31.8,3.6z"></path> </svg> </div> </li> </ol> <ol class="pure-steps_group-triggers"> <li class="pure-steps_group-triggers_item"> <label for="step-0">Restart</label> </li> <li class="pure-steps_group-triggers_item"> <label for="step-1">Sign Up</label> </li> <li class="pure-steps_group-triggers_item"> <label for="step-2">Jump in</label> </li> </ol> </div> <br> <label for="step-0">Restart</label> </form> </article> </section> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » Pure CSS Steps 喜欢 (2)or分享 (0)
