vue实现多步骤进度条表单填写效果代码
代码语言:html
所属分类:表单美化
代码描述:vue实现多步骤进度条表单填写效果代码,自带步骤切换动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Noto+Sans&display=swap'> <style> body { margin: 0; padding: 0; } #app { width: 100%; height: 100vh; overflow: hidden; } .container { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh; font-family: "Noto Sans", sans-serif; background: radial-gradient(#DF5C2E, #A43227); } article { display: flex; margin: 10px; width: calc(100% - 20px); max-width: 720px; min-height: 480px; perspective: 1000px; } article header { display: flex; justify-content: center; align-items: center; width: 60px; height: 480px; background-color: #fff; border-right: 2px dotted #DF5C2E; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2); } article .progress-step { display: flex; justify-content: center; align-items: center; position: relative; width: 30px; height: 30px; border-radius: 50%; margin-bottom: 20px; color: #fff; background-color: #DF5C2E; font-weight: bold; } article .progress-step.active { background-color: #DF5C2E; } article .progress-step.active ~ .progress-step { color: #555; background-color: #ccc; } article .progress-step.active ~ .progress-step::before { background-color: #ccc; } article .progress-step:before { content: ""; position: absolute; top: -20px; width: 2px; height: 20px; background: #DF5C2E; z-index: 10; } article .progress-step:first-child::before { display: none; } article section { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; background-color: #fff; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2); } article section h2 { font-size: 1.6rem; color: #DF5C2E; margin: 0; padding: 20px; } article section .input-fields { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; } article section .input-container { position: relative; padding: 30px 20px 20px 20px; width: calc(100% - 40px); max-width: 400px; } article section .input-container input { position: relative; width: 100%; font-family: "Noto Sans", sans-serif; font-size: 1.35rem; outline: 0; background: transparent; box-shadow: none; border: none; border-bottom: 2px dashed #DF5C2E; } article section .input-container input:valid + .input-label { top: 10px; left: 20px; font-size: 0.7rem; font-weight: normal; color: #999; } article section .input-container input.wrong-input + .input-label { color: #B92938; } article section .input-label { position: absolute; top: 32px; left: 20px; font-size: 1.35rem; pointer-events: none; transition: 0.2s ease-in-out; } article section .actions { margin: 30px 0 0 0; } article section .actions button { font-family: "Noto Sans", sans-serif; outline: none; border: none; color: #fff; background-color: #DF5C2E; font-size: 1.35rem; padding: 5px 20px; margin: 0 10px; text-transform: uppercase; border-radius: 3px; cursor: pointer; } .animate-out { transform-origin: bottom left; animation: out 0.6s ease-in-out; } .animate-in { transform-origin: left; animation: in 0.6s ease-in-out; } .animate-wrong { animation: wrong 0.4s ease-in-out; } @keyframes out { 0% { transform: translateY(0px) rotate(0deg); } 60% { transform: rotate(10deg); } 100% { transform: translateY(1000px); } } @keyframes in { 0% { opacity: 0; transform: rotateY(90deg); } 100% { opacity: 1; transform: rotateY(0deg); } } @keyframes wrong { 0% { transform: translateX(0); } 20% { transform: translateX(40px); } 40% { transform: translateX(20px); } 60% { transform: translateX(40px); } 80% { transform: translateX(20px); } 100% { transform: translateX(0); } } /* Youtube Link */ #yt_link { position: absolute; right: 0; left: 0; bottom: -200px; display: block; width: 160px; text-align: center; color: red; font-size: 15px; text-decoration: none; font-family: Verdana, Geneva, Tahoma, sans-serif; padding: 10px; margin: 0 auto; background-c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0