jquery CSS3 Dynamic Background User login interface effects

@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