jquery实现带入场出场动画的步骤表单效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery实现带入场出场动画的步骤表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"> <style> html { background: radial-gradient(#FFF176, #F57F17); min-height: 100%; font-family: "Roboto", sans-serif; } .title { text-transform: uppercase; text-align: center; margin-bottom: 30px; color: #FF8F00; font-weight: 300; font-size: 24px; letter-spacing: 1px; } .description { text-align: center; color: #666; margin-bottom: 30px; } input[type=text], input[type=email] { padding: 10px 20px; border: 1px solid #999; border-radius: 3px; display: block; width: 100%; margin-bottom: 20px; box-sizing: border-box; outline: none; } input[type=text]:focus, input[type=email]:focus { border-color: #FF6F00; } input[type=radio] { margin-right: 10px; } label { margin-bottom: 20px; display: block; font-size: 18px; color: #666; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 20px 0; cursor: pointer; } label:first-child { margin-bottom: 0; border-bottom: none; } .button, .rerun-button { padding: 10px 20px; border-radius: 3px; background: #FF6F00; color: white; text-transform: uppercase; letter-spacing: 1px; display: inline-block; cursor: pointer; } .button:hover, .rerun-button:hover { background: #e66400; } .button.rerun-button, .rerun-button.rerun-button { border: 1px solid rgba(255, 255, 255, 0.6); margin-bottom: 50px; box-shadow: 0px 10px 15px -6px rgba(0, 0, 0, 0.2); display: none; } .text-center { text-align: center; } .modal-wrap { max-width: 600px; margin: 50px auto; transition: transform 300ms ease-in-out; } .modal-header { height: 45px; background: white; border-bottom: 1px solid #ccc; display: flex; justify-content: center; align-items: center; } .modal-header span { display: block; height: 12px; width: 12px; margin: 5px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); } .modal-header span.is-active { background: rgba(0, 0, 0, 0.4); background: #FF8F00; } .modal-bodies { position: relative; perspective: 1000px; } .modal-body { background: white; padding: 40px 100px; box-shadow: 0px 50px 30px -30px rgba(0, 0, 0, 0.3); margin-bottom: 50px; position: absolute; top: 0; display: none; box-sizing: border-box; width: 100%; transform-origin: top left; } .modal-body.is-showing { display: block; } .animate-out { -webkit-animation: out 600ms ease-in-out forwards; animation: out 600ms ease-in-out forwards; } .animate-in { -webkit-animation: in 500ms ease-in-out forwards; animation: in 500ms ease-in-out forwards; display: block; } .animate-up { transform: translateY(-500px) rotate(30deg); } @-webkit-keyframes out { 0% { transform: translateY(0px) rotate(0deg); } 60% { transform: rotate(60deg); } 100% { transform: translateY(800px) rotate(10deg); } } @keyframes out { 0% { transform: translateY(0px) rotate(0deg); } 60% { transform: rotate(60deg); } 100% { transform: translateY(800px) rotate(10deg); } } @-webkit-keyframes in { 0% { opacity: 0; transform: rotateX(-90deg); } 100% { opacity: 1; transform: rotateX(0deg); } } @keyframes in { 0% { opacity: 0; transform: rotateX(-90deg); } 100% { opacity: 1; transform: rotateX(0deg); } } </style> </head> <body> <div class="modal-wrap"> <div class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0