css自适应一站式机票车票酒店旅游预订表单效果代码
代码语言:html
所属分类:表单美化
代码描述:css自适应一站式机票车票酒店旅游预订表单效果代码
代码标签: 一站式 机票 车票 酒店 旅游 预订 表单 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> * { user-select: none; font-size: 1rem; box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; } body { background-color: #f6f6f6; text-align: center; width: 90%; margin: 0 auto; max-width: 36rem; padding-bottom: 1rem; } label { cursor: pointer; user-select: none; } :root { font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; } input[type="checkbox"] { display: block; pointer-events: none; position: absolute; opacity: 0; } input[type="checkbox"] + label { margin-bottom: 1rem; color: violet; text-decoration: underline; display: inline-block; transition: all .5s ease; line-height: 3rem; white-space: nowrap; position: relative; padding-top: 4rem; vertical-align: middle; border-radius: 50%; width: 8rem; text-align: center; height: 8rem; } input[type="checkbox"] + label svg { transform: scale(0.5) translate(0, 0.75rem); transition: all 0.25s cubic-bezier(0.4, 0.1, 0.1, 1.5); display: block; width: 5rem; height: 5rem; left: 1.5rem; position: absolute; top: .5rem; } input[type="checkbox"] + label svg path { fill: violet; stroke: transparent; stroke-width: 1px; stroke-dasharray: 30px, 30px; stroke-dashoffset: -30px; transition: all 0.5s cubic-bezier(0.7, 0.1, 0.1, 0.3); } input[type="checkbox"]:focus + label { color: #901490; } input[type="checkbox"]:focus + label path { fill: #bd1abd; } input[type="checkbox"]:checked + label { text-decoration: none; color: violet; line-height: 4.5rem; background-color: #ef86ef; background-image: linear-gradient(45deg, #ef86ef, #e124e1); color: #fff; } input[type="checkbox"]:checked + label svg { transform: scale(1); } input[type="checkbox"]:checked + label svg path { fill: #f198f1; stroke: #b018b0; stroke-width: .4px; stroke-dasharray: 30px, 30px; stroke-dashoffset: 0px; } input[type="checkbox"]:checked:focus + label { box-shadow: none; } input[type="checkbox"]:checked:focus + label path { stroke: white; fill: transparent; stroke-width: .4px; } .logo { background-image: url("//repo.bfw.wiki/bfwrepo/icon/60ecf359eb0c5.png"); transition: all 0.3s cubic-bezier(0.4, 0.1, 0.1, 2); display: inline-block; margin: 1rem 0; height: 4rem; max-width: 25rem; width: 100%; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; color: transparent; text-decoration: none; outline: 0; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } input[type="text"] { box-shadow: inset 0 -.1rem #eee; background-color: transparent; } input[type="text"]:valid { box-shadow: none; } /*text inputs*/ .counter input, input[type="text"] { background-color: transparent; color: currentcolor; width: 100%; font-size: 1rem; cursor: pointer; height: 3rem; margin: 0; line-height: 3rem; appearance: none; border: 0; outline: 0; padding-top: .75rem; text-align: center; } .counter input + label, input[type="text"] + label { transform-origin: 50% 0%; transition: transform .2s ease; font-size: 1rem; white-space: nowrap; display: block; height: 3rem; line-height: 3rem; margin-top: -3rem; } .counter input + label + span, input[type="text"] + label + span { pointer-events: none; height: .15rem; background-color: rgba(0, 0, 0, 0.1); width: 0%; margin: 0 auto; transition: all 0.5s cubic-bezier(0.7, 0, 0, 0.9); display: block; margin-top: -.15rem; position: relative; z-index: 9; } .counter input:valid + label + span, .counter input:focus + label + span, input[type="text"]:valid + label + span, input[type="text"]:focus + label + span { width: 100%; } .counter input:focus + label, .counter input:valid + label, input[type="text"]:focus + label, input[type="text"]:valid + label { width: 100%; transition: transform .15s ease; color: violet; transform: scale(0.75) translate(0, -0.5em); } .counter input:focus + label + span, input[type="text"]:focus + label + span { background-color: violet; } .counter input:focus + label, .counter input:focus + label + span, input[type="text"]:focus + label, input[type="text"]:focus + label + span { opacity: 1; } input[type="submit"] { appearance: none; border: 0; cursor: pointer; font-size: 1rem; background-color: violet; display: block; padding: 1rem 2rem; color: #fff; margin: .5rem auto; } input[type="submit"]:focus { background-color: white; color: violet; box-shadow: 0 0 0 .1rem; } .notify { font-size: 1rem; z-index: -1; pointer-events: none; position: relative; transition: all 0.5s cubic-bezier(0.5, 0.1, 0.1, 0.9); opacity: 0; transform: translate(0, -7rem); margin: 0; letter-spacing: .03rem; border-radius: 1rem 1rem 0 0; font-weight: 400; color: #8aa2b9; padding: .5rem; padding-bottom: 0; max-width: 18rem; margin: 0 auto; margin-bottom: -2rem; } input:not(:checked) ~ input:not(:checked) ~ input:not(:checked) ~ .notify { opacity: 1; transform: translate(0, -9rem); } .gup, .gdown { top: .75rem; user-select: none; display: block; width: 2em; height: 2em; text-align: center; line-height: 2em; color: #abc; font-weight: 600; transform: scale(0.9); transition: all .3s ease; border-radius: 50%; box-shadow: inset 0 0 0 0.1rem; font-weight: bold; cursor: pointer; position: absolute; } .gup:hover, .gup:focus, .gdown:hover, .gdown:focus { transform: scale(1.1); background-color: violet; color: white; box-shadow: inset 0 0 0 0.1rem violet; } .counter { display: inline-block; vertical-align: top; margin: 0 .5rem; width: 9rem; min-height: 4rem; position: relative; } .counter input:focus ~ label { color: violet; } .counter input:focus ~ .gup, .counter input:focus ~ .gdown { background-color: transparent; color: violet; transform: scale(1); box-shadow: none; } .counter label { transform-origin: 50% 0; width: 100%; transform: scale(0.75); text-align: center; display: block; position: absolute; top: 2rem; transition: all .5s; } .counter button { position: absolute; appearance: none; width: 2rem; height: 2rem; border: 0; outline: 0; border-radius: 50%; line-height: 1.8rem; padding: 0; text-align: center; cursor: pointer; background-color: transparent; } input[type="date"] { font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; } .counter input ~ span { width: 0; height: .15rem; background-color: rgba(0, 0, 0, 0.1); width: 0%; margin: 0 auto; transition: all 0.5s cubic-bezier(0.7, 0, 0, 0.9); display: block; margin-top: -.15rem; position: relative; z-index: 9; } .counter input:focus ~ span { width: 2.5rem; background-color: violet; } .counter .gup { left: auto; right: 1.5rem; } .counter .gdown { right: auto; left: 1.5rem; } input[type="text"] { user-select: text; } ::-webkit-datetime-edit { padding: 0em; } ::-webkit-datetime-edit-fields-wrapper { background: transparent; } ::-webkit-datetime-edit-text { color: transparent; padding: 0 0.3em; } :valid::-webkit-datetime-edit-text { color: #abc; } ::-webkit-datetime-edit-month-field { color: currentcolor; } :valid::-webkit-datetime-edit-month-field { color: currentcolor; } ::-webkit-datetime-edit-month-field:focus { background-color: white; color: violet; } ::-webkit-datetime-edit-day-field { color: currentcolor; } :valid::-webkit-datetime-edit-day-field { color: currentcolor; } ::-webkit-datetime-edit-day-field:focus { background-color: white; color: violet; } ::-webkit-datetime-edit-year-field { color: currentcolor; } :valid::-webkit-datetime-edit-year-field { color: currentcolor; } ::-webkit-datetime-edit-year-field:focus { background-color: white; color: violet; } ::-webkit-datetime-edit:focus { background-color: white; } ::-webkit-inner-spin-button { display: none; } ::-webkit-calendar-picker-indicator { background: violet; cursor: pointer; color: #fff; } input[type="date"] { cursor: pointer; width: 9.2rem; } .counter input:valid ~ label { color: currentcolor; } .counter input:focus ~ label { color: violet; } .counter select { text-indent: 1px; text-overflow: ''; display: inline-block; text-align-last: center; text-align: center; background-color: transparent; appearance: none; border-radius: .25rem; width: 100%; line-height: 1rem; text-indent: 0; border: none; box-shadow: 0 0 0 0.1rem violet; padding: 0 1rem; pad.........完整代码请登录后点击上方下载按钮下载查看
网友评论0