vue实现输入掩码动画效果
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - Credit Card Form - VueJs</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> @import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700|Source+Sans+Pro:400,600,700&display=swap"); body { background: #ddeefc; font-family: "Source Sans Pro", sans-serif; font-size: 16px; } * { box-sizing: border-box; } *:focus { outline: none; } .wrapper { min-height: 100vh; display: flex; padding: 50px 15px; } @media screen and (max-width: 700px), (max-height: 500px) { .wrapper { flex-wrap: wrap; flex-direction: column; } } .card-form { max-width: 570px; margin: auto; width: 100%; } @media screen and (max-width: 576px) { .card-form { margin: 0 auto; } } .card-form__inner { background: #fff; box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4); border-radius: 10px; padding: 35px; padding-top: 180px; } @media screen and (max-width: 480px) { .card-form__inner { padding: 25px; padding-top: 165px; } } @media screen and (max-width: 360px) { .card-form__inner { padding: 15px; padding-top: 165px; } } .card-form__row { display: flex; align-items: flex-start; } @media screen and (max-width: 480px) { .card-form__row { flex-wrap: wrap; } } .card-form__col { flex: auto; margin-right: 35px; } .card-form__col:last-child { margin-right: 0; } @media screen and (max-width: 480px) { .card-form__col { margin-right: 0; flex: unset; width: 100%; margin-bottom: 20px; } .card-form__col:last-child { margin-bottom: 0; } } .card-form__col.-cvv { max-width: 150px; } @media screen and (max-width: 480px) { .card-form__col.-cvv { max-width: initial; } } .card-form__group { display: flex; align-items: flex-start; flex-wrap: wrap; } .card-form__group .card-input__input { flex: 1; margin-right: 15px; } .card-form__group .card-input__input:last-child { margin-right: 0; } .card-form__button { width: 100%; height: 55px; background: #2364d2; border: none; border-radius: 5px; font-size: 22px; font-weight: 500; font-family: "Source Sans Pro", sans-serif; box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3); color: #fff; margin-top: 20px; cursor: pointer; } @media screen and (max-width: 480px) { .card-form__button { margin-top: 10px; } } .card-item { max-width: 430px; height: 270px; margin-left: auto; margin-right: auto; position: relative; z-index: 2; width: 100%; } @media screen and (max-width: 480px) { .card-item { max-width: 310px; height: 220px; width: 90%; } } @media screen and (max-width: 360px) { .card-item { height: 180px; } } .card-item.-active .card-item__side.-front { transform: perspective(1000px) rotateY(180deg) rotateX(0deg) rotateZ(0deg); } .card-item.-active .card-item__side.-back { transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg); } .card-item__focus { position: absolute; z-index: 3; border-radius: 5px; left: 0; top: 0; width: 100%; height: 100%; transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85); opacity: 0; pointer-events: none; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.65); } .card-item__focus:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; background: #08142f; height: 100%; border-radius: 5px; filter: blur(25px); opacity: 0.5; } .card-item__focus.-active { opacity: 1; } .card-item__side { border-radius: 15px; overflow: hidden; box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55); transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg); transform-style: preserve-3d; transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85); backface-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0