jquery三维登录表单效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery三维登录表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .form { margin: auto; width: 400px; padding: 20px 30px; background: #fff; border: 1px solid #dfdfdf; transform-style: preserve-3d; perspective-origin: 50px center; perspective: 2000px; transition: transform 1s ease; } .form::before, .form::after { content: ""; position: absolute; width: 100%; left: 0; } .form::before { height: 100%; top: 0; transform: translateZ(-100px); background: #333; opacity: 0.3; } .form::after { content: "SUCCESS!"; transform: translateY(-50%) translateZ(-101px) scaleX(-1); top: 50%; color: #fff; text-align: center; font-weight: bold; } .field { position: relative; background: #cfcfcf; transform-style: preserve-3d; } .field + .field { margin-top: 10px; } .icon { width: 24px; height: 24px; position: absolute; top: calc(50% - 12px); left: 12px; transform: translateZ(50px); transform-style: preserve-3d; } .icon::before, .icon::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .icon::after { transform: translateZ(-23px); opacity: 0.5; } .input { border: 1px solid #dfdfdf; background: #fff; height: 48px; line-height: 48px; padding: 0 10px 0 48px; width: 100%; transform: translateZ(26px); } .button { display: block; width: 100%; border: 0; text-align: center; font-weight: bold; color: #fff; background: linear-gradient(45deg, #e53935, #e35d5b); margin-top: 20px; padding: 14px; position: relative; transform-style: preserve-3d; transform: translateZ(26px); transition: transform 0.3s ease; cursor: pointer; } .button:hover { transform: translateZ(13px); } .side-top-bottom { width: 100%; } .side-top-bottom::before, .side-top-bottom::after { content: ""; width: 100%; height: 26px; background: linear-gradient(45deg, #e2231e, #df4745); position: absolute; left: 0; } .side-top-bottom::before { transform-origin: center top; transform: translateZ(-26px) rotateX(90deg); top: 0; } .side-top-bottom::after { transform-origin: center bottom; transform: translateZ(-26px) rotateX(-90deg); bottom: 0; } .side-left-right { height: 100%; } .side-left-right::before, .side-left-right::after { content: ""; height: 100%; width: 26px; position: absolute; top: 0; } .side-left-right::before { background: #e53935; transform-origin: left center; transform: rotateY(90deg); left: 0; } .side-left-right::after { background: #e35d5b; transform-origin: right center; transform: rotateY(-90deg); right: 0; } .email .icon::before, .email .icon::after { background: url(//repo.bfw.wiki/bfwrepo/image/608ff7893b3e9.png) center/contain no-repeat; } .password .icon::before, .password .icon::after { background: url(//repo.bfw.wiki/bfwrepo/image/608ff7a07da6a.png) center/contain no-repeat; } .face-up-left { transform: rotateY(-30deg) rotateX(30deg); } .face-up-right { transform: rotateY(30deg) rotateX(30deg); } .face-down-left { transform: rotateY(-30deg) rotateX(-30deg); } .face-down-right { transform: rotateY(30deg) rotateX(-30deg); } .form-complete { -webkit-animation: formComplete 2s ease; animation: formComplete 2s ease; } .form-error { -webkit-animation: formError 2s ease; animation: formError 2s ease; } input:active, input:focus, button:active, button:focus { outline: none; border: 1px solid #e77371; } @-webkit-keyframes formComplete { 50%, 55% { transform: rotateX(30deg) rotateY(180deg); } 100% { transform: rotateX(0deg) rotateY(1turn); } } @keyframes formComplete { 50%, 55% { transform: rotateX(30deg) rotateY(180deg).........完整代码请登录后点击上方下载按钮下载查看
网友评论0