jquery+css实现炫酷简洁的酒店预约表单代码
代码语言:html
所属分类:表单美化
代码描述:jquery+css实现炫酷简洁的酒店预约表单代码
代码标签: jquery css 炫酷 简洁 酒店 预约 表单 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:100,300,400,500,700,800,900" rel="stylesheet"> <style> html { font-size: 1.3px; } html * { box-sizing: border-box; } body { width: 100vw; height: 100vh; background: linear-gradient(60deg, #1900fa, #616bff); background: white; font-family: "Alegreya Sans", sans-serif; font-size: 40rem; overflow: hidden; } .wrap { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); color: #312eff; width: 500rem; height: 450rem; } .wrap.member-selected .member:not(.selected) { opacity: 0; pointer-events: none; transform: perspective(100rem) translatez(-50rem); transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), height 500ms cubic-bezier(0.645, 0.045, 0.355, 1); } .wrap.member-selected .instructions .first { opacity: 0; } .wrap.member-selected.date-selected .deselect-date { opacity: 1; pointer-events: auto; } .wrap.member-selected.date-selected .calendar .date { transform: scale(0.5) translateY(-5rem) translateX(0rem); opacity: 1; } .wrap.member-selected.date-selected .calendar .month { transform: scale(0.5) translateY(-5rem) translateX(100rem); } .wrap.member-selected.date-selected .calendar .year { transform: scale(0.5) translateY(-5rem) translateX(200rem); } .wrap.member-selected.date-selected .calendar table { pointer-events: none; transform: translateY(50rem); border-top: 1px solid rgba(221, 221, 221, 0.8); } .wrap.member-selected.date-selected .calendar td:not(.selected), .wrap.member-selected.date-selected .calendar th:not(.selected) { opacity: 0; transform: perspective(100rem) translatez(-50rem); transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); } .wrap.member-selected.date-selected .slots { opacity: 1; transform: translatey(0%); pointer-events: auto; } .wrap.member-selected.date-selected .slots li { transform: translatey(0); opacity: 1; color: #312eff; } .wrap.member-selected.date-selected .slots li:nth-child(1) { transition-delay: 0ms; transform: translateY(0rem) perspective(100rem) translateZ(0); } .wrap.member-selected.date-selected .slots li:nth-child(2) { transition-delay: 83.3333333333ms; transform: translateY(50rem) perspective(100rem) translateZ(0); } .wrap.member-selected.date-selected .slots li:nth-child(3) { transition-delay: 166.6666666667ms; transform: translateY(100rem) perspective(100rem) translateZ(0); } .wrap.member-selected.date-selected .slots li:nth-child(4) { transition-delay: 250ms; transform: translateY(150rem) perspective(100rem) translateZ(0); } .wrap.member-selected.date-selected .slots li:nth-child(5) { transition-delay: 333.3333333333ms; transform: translateY(200rem) perspective(100rem) translateZ(0); } .wrap.member-selected.date-selected .slots li:nth-child(6) { transition-delay: 416.6666666667ms; transform: translateY(250rem) perspective(100rem) translateZ(0); } .wrap.member-selected.date-selected .slots li:nth-child(7) { transition-delay: 500ms; transform: translateY(300rem) perspective(100rem) translateZ(0); } .wrap.member-selected.date-selected.slot-selected .form { opacity: 1; transform: translatey(0%); pointer-events: auto; transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1); } .wrap.member-selected.date-selected.slot-selected .form * { transform: translatey(0); } .wrap.member-selected.date-selected.slot-selected .form *:nth-child(1) { transition-delay: 50ms; } .wrap.member-selected.date-selected.slot-selected .form *:nth-child(2) { transition-delay: 100ms; } .wrap.member-selected.date-selected.slot-selected .form *:nth-child(3) { transition-delay: 150ms; } .wrap.member-selected.date-selected.slot-selected .form *:nth-child(4) { transition-delay: 200ms; } .wrap.member-selected.date-selected.slot-selected .form *:nth-child(5) { transition-delay: 250ms; } .wrap.member-selected.date-selected.slot-selected .form *:nth-child(6) { transition-delay: 300ms; } .wrap.member-selected.date-selected.slot-selected .deselect-slot { opacity: 1; pointer-events: auto; } .wrap.member-selected.date-selected.slot-selected .slots { pointer-events: none; } .wrap.member-selected.date-selected.slot-selected .slots li:not(.selected) { opacity: 0; } .wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(1) { transition-delay: 0ms; transform: translateY(0rem) perspective(100rem) translateZ(-50rem); } .wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(2) { transition-delay: 83.3333333333ms; transform: translateY(50rem) perspective(100rem) translateZ(-50rem); } .wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(3) { transition-delay: 166.6666666667ms; transform: translateY(100rem) perspective(100rem) translateZ(-50rem); } .wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(4) { transition-delay: 250ms; transform: translateY(150rem) perspective(100rem) translateZ(-50rem); } .wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(5) { transition-delay: 333.3333333333ms; transform: translateY(200rem) perspective(100rem) translateZ(-50rem); } .wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(6) { transition-delay: 416.6666666667ms; transform: translateY(250rem) perspective(100rem) translateZ(-50rem); } .wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(7) { transition-delay: 500ms; transform: translateY(300rem) perspective(100rem) translateZ(-50rem); } .wrap.member-selected.date-selected.slot-selected .slots li.selected { transform: translateY(0rem) perspective(100rem) translateZ(0rem); transition-delay: 0s; border-bottom: 1px solid rgba(221, 221, 221, 0.8); } .wrap.member-selected.date-selected.slot-selected.booking-complete .deselect-member, .wrap.member-selected.date-selected.slot-selected.booking-complete .deselect-date, .wrap.member-selected.date-selected.slot-selected.booking-complete .deselect-slot { opacity: 0; pointer: none; } .wrap.member-selected.date-selected.slot-selected.booking-complete .form { transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1); } .wrap.member-selected.date-selected.slot-selected.booking-complete .form:before, .wrap.member-selected.date-selected.slot-selected.booking-complete .form:after { transform: scalex(0); } .wrap.member-selected.date-selected.slot-selected.booking-complete .form label { opacity: 0; transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); } .wrap.member-selected.date-selected.slot-selected.booking-complete .form input { border-bottom: 1px solid rgba(221, 221, 221, 0.8); pointer-events: none; } .wrap.member-selected.date-selected.slot-selected.booking-complete .form input[name=name] { padding: 10rem 70rem; transform: translatey(-33rem); } .wrap.member-selected.date-selected.slot-selected.booking-complete .form input[name=email] { padding: 10rem 70rem; transform: translatey(-60rem); } .wrap.member-selected.date-selected.slot-selected.booking-complete .form input[type=submit] { transform: translatey(-60rem); opacity: 0; transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); } .wrap.member-selected.date-selected.slot-selected.booking-complete .confirm-message { opacity: 1; transform: translatey(0%); pointer-events: auto; } .instructions { margin-bottom: 25rem; text-align: center; height: 80vh; font-weight: 300; color: #312eff; } .instructions > * { transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); } .deselect-member, .deselect-date, .deselect-slot { position: absolute; color: #ddd; top: 35rem; right: 25rem; z-index: 10; display: inline-block; font-size: 20rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); font-weight: 100; } .deselect-date { top: 95rem; } .deselect-slot { top: 145rem; } .member { background: white; width: 100%; padding: 20rem; height: 100rem; cursor: pointer; position: absolute; top: 0; transition: opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), height 300ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 800ms cubic-bezier(0.645, 0.045, 0.355, 1); box-shadow: 5rem 5rem 20rem rgba(49, 46, 255, 0.15); overflow: hidden; } .member .name { display: inline-block; margin-left: 85rem; line-height: 60rem; transform-origin: 0% 0%; transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1); font-weight: 100; font-size: 40rem; } .member .avatar { transform-origin: 100% 0%; width: 70rem; height: 70rem; border-radius: 100rem; display: inline-block; position: absolute; top: 15rem; left: 15rem; background-size: cover; filter: saturate(50%) contrast(120%); transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1); } .member .avatar:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; border-radius: 100rem; background-color: #312eff; mix-blend-mode: lighten; } .member:nth-child(1) { transform: translatey(70rem) perspective(100rem) translatez(-10rem); } .member:nth-child(2) { transform: translatey(170rem) perspective(100rem) translatez(-10rem); } .member:nth-child(3) { transform: translatey(270rem) perspective(100rem) translatez(-10rem); } .member:nth-child(4) { transform: translatey(370rem) perspective(100rem) translatez(-10rem); } .member.selected { transform: translatey(0rem) perspective(100rem) translatez(0rem); height: 450rem; cursor: default; z-index: 2; box-shadow: 10rem 10rem 60rem rgba(3, 0, 199, 0.1); transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), height 500ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 800ms cubic-bezier(0.645, 0.045, 0.355, 1); } .member.selected .deselect-member { opacity: 1; pointer-events: auto; } .member.selected .name, .member.selected .avatar { transform: scale(0.7) translatex(-30rem); } .member.selected .calendar { height: 340rem; transform: translatey(0rem); transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), height 800ms cubic-bezier(0.645, 0.045, 0.355, 1); opacity: 1; } .calendar { width: 100%; margin-top: 0rem; height: 0; opacity: 0; transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1), height 300ms cubic-bezier(0.645, 0.045, 0.355, 1); font-size: 17rem; border-top: 1px solid rgba(221, 221, 221, 0.8); } .calendar .date, .calendar .month, .calendar .year { position: absolute; top: 15rem; left: 65rem; font-size: 50rem; display: inline-block; font-weight: 100; transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1); transform-origin: 100% 0%; transform: translateX(0) scale(1); } .calendar .year { transform: translateX(80rem) scale(1); } .calendar .date { opacity: 0; transform-origin: 0% 0%; transform: translateX(-100rem) scale(1); } .calendar table { width: 100%; text-align: center; transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1); transform: translatey(80rem); border-top: 1px solid white; } .calendar table td, .calendar table th { width: 13%; padding: 10rem; cursor: pointer; font-weight: 200; } .calendar table td.today, .calendar table th.today { background: #312eff; color: white; } .calendar table td.disabled, .calendar table th.disabled { color: #ddd; pointer-events: none; } .calendar table td.disabled.today, .calendar table th.disabled.today { background: #ddd; color: white; } .calendar table td.selected, .calendar table th.selected { transform: perspective(100rem) translateZ(80rem); transition: opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1); opacity: 0; } .calendar table th { padding-top: 20rem; } .slots { position: absolute; left: 15rem; width: calc(100% - 20rem); height: 320rem; top: 135rem; opacity: 0; transform: translatey(50%); pointer-events: none; transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1); font-size: 25rem; font-weight: 100; } .slots li { background: white; display: block; transition: color 500ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), border 800ms cubic-bezier(0.645, 0.045, 0.355, 1); transform-origin: 100% 50%; color: transparent; border-bottom: 1px solid rgba(221, 221, 221, 0); padding: 10rem 70rem; cursor: pointer; position: absolute; width: calc(100% - 20rem); } .slots li:nth-child(1) { transform: translat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0