js+css实现三维翻转式步骤表单输入效果代码
代码语言:html
所属分类:表单美化
代码描述:js+css实现三维翻转式步骤表单输入效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { font-family: helvetica; height: 100vh; width: 100vw; background: #e90052; margin: 0; display: flex; transition: background 0.5s; } .scene { width: 650px; height: 70px; /* margin: 80px; */ perspective: 400px; margin: auto; position: relative; transition: opacity 0.5s; z-index: 2; } .scene.end { opacity: 0; transition-delay: 0.25s; transition: opacity 0.5s; z-index: 0; } .welcome { opacity: 0; width: 100%; position: absolute; height: 100%; display: flex; transition-delay: 0.25s; transition: opacity 0.5s; } .welcome .content { margin: auto; font-size: 2rem; color: #ffffff; } .welcome.show { opacity: 1; } .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: translateZ(-100px); } .steps { position: absolute; top: 140%; display: flex; width: 100%; justify-content: center; } .steps .dot { width: 15px; height: 15px; background: rgba(0, 0, 0, 0.75); border-radius: 100%; margin: 0 10px; transition: 0.25s; } .steps .dot.done { background: rgba(255, 255, 255, 0.75); } .cube__face { position: absolute; width: 100%; height: 100%; font-size: 40px; font-weight: bold; transition: transform 0.5s; opacity: 0; background: #ffffff; border-radius: 5px; } .cube__face--front { transform: rotateY(0deg) translateZ(35px); opacity: 1; box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.5); } .cube__face--top { transform: rotateX(90deg) translateZ(35px); opacity: 1; } .cube__face--top .container { opacity: 0; transition: opacity 0.5s; } .cube__face--bottom { transform: rotateX(-90deg) translateZ(35px); } .hidden { display: none; } input:not([type="radio"]), select { display: block; margin: 0; /* padding: 0 0 0.15em; */ /* padding-left: 50px; */ width: 100%; border: none; background-color: transparent; color: #202020; text-overflow: ellipsis; font-weight: normal; font-size: 1.5rem; height: 100%; /* padding-right:185px; */ } input:focus, select:focus { outline: none; } input::placeholder { color: #a0a0a0; } .cube__face .container { height: 100%; width: 100%; position: relative; padding-right: 185px; padding-left: 50px; } div.btn.show { opacity: 1 !important; } div.btn.show span { display: block !important; } div.btn { position: absolute; right: 10px; top: 0; height: 100%; display: flex; transition: opacity 0.25s ease; opacity: 0; } div.btn span { color: #e90052; font-size: 1.25rem; padding: 10px 25px; border: 3px solid #e90052; border-radius: 40px; display: inline-block; margin: auto; cursor: pointer; transition: all 0.25s; display: none; } div.btn span:hover { color: #ffffff !important; background: #e90052; } input.label::placeholder { color: #202020 !important; } #step__1 .container, #step__6 .container { display: flex; padding-right: 10px; } .radio { display: flex; align-items: center; } .item { width: 46px; height: 46px; margin: 2px; cursor: pointer; transition: transform 0.25s; border-radius: 4px; } .item:hover { transform: scale(1.2); } body.blue, .item.blue { background: #04f5ff; } body.yellow, .item.yellow { background: #ebff00; } body.purple, .item.purple { background: #e90052; } body.green, .item.green { background: #00ff85; } body.violet, .item.violet { background: #38003c; } div.btn.blue span { color: #04f5ff; border-color: #04f5ff; } div.btn.blue span:hover { background: #04f5ff; } div.btn.yellow span { color: #ebff00; border-color: #ebff00; } div.btn.yellow span:hover { background: #ebff00; } div.btn.purple span { color: #e90052; border-color: #e90052; } div.btn.purple span:hover { background: #e90052; } div.btn.green span { color: #00ff85; border-color: #00ff85; } div.btn.green span:hover { background: #00ff85; } div.btn.violet span { color: #38003c; border-color: #38003c; } div.btn.violet span:hover { background: #38003c; } .right { display: flex; align-items: center; } .right label { font-size: 1.5rem; font-weight: normal; } .checkbox { padding: 4px; border: 3px solid #e90052; display: inline-block; width: 64px; border-radius: 40px; margin: auto 8px; } .checkbox .circle { height: 25px; width: 25px; border-radius: 100%; background: #e90052; display: block; transform: translateX(0px); transition: transform 0.25s ease, background 0.25s ease; } .checkbox.checked { background: #e90052; } .checkbox.checked .circle { transform: translateX(25px); background: white !important; } .checkbox.blue { border-color: #04f5ff; } .checkbox.blue .circle { background: #04f5ff; } .checkbox.checked.blue { background: #04f5ff; } .checkbox.yellow { border-color: #ebff00; } .checkbox.yellow .circle { background: #ebff00; } .checkbox.checked.yellow { background: #ebff00; } .checkbox.purple { border-color: #e90052; } .checkbox.purple .circle { background: #e90052; } .checkbox.checked.purple { background: #e90052; } .checkbox.green { border-color: #00ff85; } .checkbox.green .circle { background: #00ff85; } .checkbox.checked.green { background: #00ff85; } .checkbox.violet { border-color: #38003c; } .checkbox.violet .circle { background: #38003c; } .checkbox.checked.violet { background: #38003c; } </style> </head> <body> <div class="scene"> <div class="cube"> <nav class="steps"> <div class="dot step_1 done"></div> <div class="dot step_2"></div> <div class="dot step_3"></div> <div class="dot step_4"></div> <div class="dot step_5"></div> <div class="dot step_6"></div> </nav> <div class="cube__face cube__face--front" id="step__1"> <div class="container"> <input type="text" class="label" placeholder="Please pick a color" disabled> <div class="radio"> <div class="item blue" data-color="blue"></div> <div class="item yellow" data-color="yellow"></div> <div class="item purple" data-color="purple"></div> <div class="item green" data-color="green"></div> <div class="item violet" data-color="violet"></div> </div> <div class="btn" style="display:none"> <span data-step=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0