TweenMax+svg实现炫酷表单发送动画效果代码
代码语言:html
所属分类:表单美化
代码描述:TweenMax+svg实现炫酷表单发送动画效果代码
代码标签: TweenMax svg 炫酷 表单 发送 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700"); html { font-size: 10px; overflow-x: hidden; } body { background: #0288d1; box-sizing: border-box; } * { box-sizing: inherit; } h2 { font-size: 3.5rem; font-family: "raleway"; } .content { margin: 40px auto; width: 75vw; max-width: 400px; background: white; padding: 20px; border-radius: 20px; border-top: 20px solid #55C4FF; box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1); } form { position: relative; } form input, form textarea { display: block; width: 100%; margin: 10px 0; padding: 15px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border: none; background: rgba(2, 136, 209, 0.1); border-bottom: 3px solid #55C4FF; font-family: "raleway"; color: #0288d1; font-size: 1.4rem; } form input::-moz-placeholder, form textarea::-moz-placeholder { color: #0288d1; } form input:-ms-input-placeholder, form textarea:-ms-input-placeholder { color: #0288d1; } form input::placeholder, form textarea::placeholder { color: #0288d1; } form input:focus, form textarea:focus { outline: 5px solid #55C4FF; border: none; } form textarea { height: 200px; } #thanks { display: flex; background: #C8E6C9; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #689F38; transform-origin: center bottom; transform: scaley(0); } .svg-container { width: 70px; position: absolute; right: 2rem; top: 1.3rem; } .svg-container svg .rightwing { fill: #55C4FF; } .svg-container svg .leftwing { fill: #55C4FF; } .svg-container svg .center { fill: #005A8A; } .svg-container svg .bottom { fill: #012B41; } .btn-wrapper { position: relative; display: flex; margin-top: 15px; width: 200px; transition: all 0.1s ease-out; } .btn-wrapper:hover { transform: translateY(-2px); } .btn-wrapper:hover .svg-container { -webkit-animation: jiggle 0.25s; animation: jiggle 0.25s; transform: center center; } .btn-wrapper #send { border-radius: 2px; transform: translateY(0); font-family: "raleway"; font-weight: 200; font-size: 24px; color: white; background: #0288D1; padding: 2rem 10rem 2rem 2rem; } .btn-wrapper #send:active { transform: translateY(1px); } @-webkit-keyframes jiggle { 0% { transform: rotate(0); transform-origin: center center; } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } 100% { transform: rotate(0); transform-origin: center center; } } @keyframes jiggle { 0% { transform: rotate(0); transform-origin: center center; } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } 100% { transform: rotate(0); transform-origin: center center; } } </style> </head> <body> <div class="content"> <h2>Write me a message</h2> <form> <input placeholder="Name"> <input placeholder="Email"> <textarea placeholder="Message"></textarea> <div id="thanks"> <h2>Thanks!!!</h2&g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0