@import URL (http://fonts.useso.com/css?family=Source+Sans+Pro:200,300); * {box-sizing:border-box; margin:0; padding:0; font-weight:300;} Body {font-family: ' Source Sans Pro ', Sans-serif; Color:white; font-weight:300;} Body::-webkit-input-placeholder {/* webkit browsers */font-family: ' Source Sans Pro ', Sans-serif; Color:white; font-weight:300;} Body:-moz-placeholder {/* Mozilla Firefox 4 to + */font-family: ' Source Sans Pro ', Sans-serif; Color:white; Opacity:1; font-weight:300;} Body::-moz-placeholder {/* Mozilla Firefox 19+ */font-family: ' Source Sans Pro ', Sans-serif; Color:white; Opacity:1; font-weight:300;} Body:-ms-input-placeholder {/* Internet Explorer +/font-family: ' Source Sans Pro ', Sans-serif; Color:white; font-weight:300;}. Wrapper {background: #50a3a2; Background:-webkit-linear-gradient (top left, #50a3a2 0, #53e3a6 100%); Background:linear-gradient (to bottom right, #50a3a2 0, #53e3a6 100%); opacity:0.8; PositiOn:absolute; left:0; width:100%; height:400px; Overflow:hidden;}. Wrapper.form-success. Container H1 {-webkit-transform:translatey (85px); -ms-transform:translatey (85px); Transform:translatey (85px);}. container {max-width:600px; margin:0 Auto; padding:80px 0; height:400px; Text-align:center;}. Container H1 {font-size:40px; -webkit-transition-duration:1s; Transition-duration:1s; -webkit-transition-timing-function:ease-in-put; Transition-timing-function:ease-in-put; font-weight:200;} form {padding:20px 0; position:relative; Z-index:2;} form input {-webkit-appearance:none; -moz-appearance:none; Appearance:none; outline:0; border:1px Solid Rgba (255, 255, 255, 0.4); Background-color:rgba (255, 255, 255, 0.2); width:250px; border-radius:3px; padding:10px 15px; margin:0 Auto 10px Auto; Display:block; Text-align:center; font-size:18px; Color:white; -webkit-transition-duration:0.25s; transition-duration:0.25s; font-weight:300;} Form Input:hover {Background-color:rgba (255, 255, 255, 0.4);} Form Input:focus {background-color:white; width:300px; Color: #53e3a6;} Form button {-webkit-appearance:none; -moz-appearance:none; Appearance:none; outline:0; Background-color:white; border:0; padding:10px 15px; Color: #53e3a6; border-radius:3px; width:250px; Cursor:pointer; font-size:18px; -webkit-transition-duration:0.25s; transition-duration:0.25s;} Form Button:hover {background-color: #f5f7f9;}. bg-bubbles {position:absolute; top:0; left:0; width:100%; height:100%; Z-index:1;}. Bg-bubbles Li {position:absolute; List-style:none; Display:block; width:40px; height:40px; Background-color:rgba (255, 255, 255, 0.15); Bottom: -160px; -webkit-animation:square 25s Infinite; Animation:square 25s Infinite; -webkit-transition-timing-function:linear; Transition-timing-function:linear;}. Bg-bubblEs li:nth-child (1) {left:10%;}. Bg-bubbles Li:nth-child (2) {left:20%; width:80px; height:80px; -webkit-animation-delay:2s; Animation-delay:2s; -webkit-animation-duration:17s; animation-duration:17s;}. Bg-bubbles Li:nth-child (3) {left:25%; -webkit-animation-delay:4s; animation-delay:4s;}. Bg-bubbles Li:nth-child (4) {left:40%; width:60px; height:60px; -webkit-animation-duration:22s; animation-duration:22s; Background-color:rgba (255, 255, 255, 0.25);}. Bg-bubbles Li:nth-child (5) {left:70%;}. Bg-bubbles Li:nth-child (6) {left:80%; width:120px; height:120px; -webkit-animation-delay:3s; animation-delay:3s; Background-color:rgba (255, 255, 255, 0.2);}. Bg-bubbles Li:nth-child (7) {left:32%; width:160px; height:160px; -webkit-animation-delay:7s; animation-delay:7s;}. Bg-bubbles Li:nth-child (8) {left:55%; width:20px; height:20px; -webkit-animation-delay:15s; Animation-delay:15s; -webkit-animation-duration:40s; animation-duration:40s;}. Bg-bubbles Li:nth-child (9) {left:25%; width:10px; height:10px; -webkit-animation-delay:2s; Animation-delay:2s; -webkit-animation-duration:40s; animation-duration:40s; Background-color:rgba (255, 255, 255, 0.3);}. Bg-bubbles Li:nth-child (Ten) {left:90%; width:160px; height:160px; -webkit-animation-delay:11s; animation-delay:11s;} @-webkit-keyframes Square {0% {-webkit-transform:translatey (0); Transform:translatey (0); } 100% {-webkit-transform:translatey ( -700px) rotate (600deg); Transform:translatey ( -700px) rotate (600deg); }} @keyframes Square {0% {-webkit-transform:translatey (0); Transform:translatey (0); } 100% {-webkit-transform:translatey ( -700px) rotate (600deg); Transform:translatey ( -700px) rotate (600deg); }}
$ (' #login-button '). Click (Function (event) {Event.preventdefault (); $ (' form '). FadeOut ($); $ ('. Wrapper '). AddClass ( ' form-success ');});
<script src= "Http://www.datouwang.com/uploads/demo/jiaoben/201507/jiaoben544/js/jquery-2.1.1.min.js" type= " Text/javascript "></script>
jquery CSS3 Dynamic Background User login interface effects