采用CSS3设计的登录界面，动态效果（动画）

与上一篇的“采用CSS3设计的登陆界面”的相同，只是样式style添加了CSS3的动画元素。

style内容如下：

<style>
            html,body,div{
                margin:0;
                padding:0;
                font-size:100%;
            }
            html{
                //background:url('./6.jpg') no-repeat;
                //background-size:cover;
                background:#45b97c;
                animation:bganimation 5s;
            }
            #loginForm{
                height:200px;
                width:350px;
                position:absolute;
                top:50%;
                left:50%;
                margin:-100px 0 0 -175px;
                box-shadow:0px 0px 25px 12px #c0c0c0;
                border:6px solid;
                border-color:#c0c0c0;
                border-radius:12px;
                animation:loginanimation 5s;
            }
            @keyframes bganimation{
                0% {background:#deab8a;}
                10% {background:#f7acbc;}
                20%{background:#987165;}
                30%{background:#e0861a;}
                40%{background:#00ae9d;}
                50%{background:#008792;}
                60%{background:#7f7522;}
                70%{background:#f173ac;}
                80%{background:#7c8577;}
                90%{background:#6950a1;}
                100%{background:#45b97c;}
            }
            @keyframes loginanimation{
                0% {transform:scale3d(0,0,0);top:50%;left:50%;}
                10% {transform:scale3d(0.1,0.1,0.1);top:25%;left:50%;}
                20%{transform:scale3d(0.2,0.2,0.2);top:25%;left:75%;}
                30%{transform:scale3d(0.3,0.3,0.3);top:50%;left:75%;}
                40%{transform:scale3d(0.4,0.4,0.4);top:75%;left:75%;}
                50%{transform:scale3d(0.5,0.5,0.5);top:75%;left:50%;}
                60%{transform:scale3d(0.6,0.6,0.6);top:75%;left:25%;}
                70%{transform:scale3d(0.7,0.7,0.7);top:50%;left:25%;}
                80%{transform:scale3d(0.8,0.8,0.8);top:25%;left:25%;}
                90%{transform:scale3d(0.9,0.9,0.9);top:25%;left:50%;}
                100%{transform:scale3d(1,1,1);top:50%;left:50%;}
            }
            #loginTitle{
                height:50px;
                width:100%;
                font-family:blazed,Kunstler Script"New York",Georgia;
                font-weight:bold;
                font-style:oblique;
                font-size:2em;
                text-align:center;
                line-height:50px;
                //-webkit-text-stroke:10px black;
                color:white;
                text-shadow:1px 1px 0 rgba(107,223,248,0.8),2px 2px 0 rgba(107,223,248,0.8),3px 3px 0 rgba(107,223,248,0.8),4px 4px 0 rgba(107,223,248,0.8),5px 5px 0 rgba(107,223,248,0.8);
            }
            #loginContent{
                height:110px;
                width:100%;
                position:relative;
            }
            #loginButton{
                height:40px;
                width:100%;
            }
            #register{
                height:40px;
                width:175px;
                float:left;
            }
            #login{
                height:40px;
                width:175px;
                float:left;
            }
            #register_button{
                height:40px;
                width:175px;
                background:none;
                border-radius:6px;
                border:1px solid;
                border-color:#808080;
                box-shadow:0px 0px 10px 0px #c0c0c0 inset;
                font-weight:bold;
            }
            #login_button{
                height:40px;
                width:175px;
                background:none;
                border-radius:6px;
                border:1px solid;
                border-color:#808080;
                box-shadow:0px 0px 10px 0px #c0c0c0 inset;
                font-weight:bold;
            }
            #user_info{
                position:absolute;
                height:80px;
                width:250px;
                left:75px;
                top:0px;
            }
            #user_help{
                position:absolute;
                height:30px;
                width:230px;
                left:60px;
                top:80px;
            }
            label{
                font-weight:bold;
                width:20px;
            }
            #user_info input{
                background:none;
                width:175px;
            }
            input[type=checkbox]{
                vertical-align:middle;
                margin-top:0;
            }
            #user_help input,#user_help label,#user_help a{
                line-height:30px;
                font-size:12px;
            }
            img{
                height:20px;
                width:20px;
                display:block;
                float:left;
            }
            #user_info label{
                display:block;
            }
</style>

 

实现效果如下，背景颜色类似微软win8及以上版本的颜色渐变效果，登陆窗口随位置的移动而不断变大到最终静止效果（以下仅例举3副效果图）：

如有不足，请多多指教哈~~~！

原创，转载请注明出处 叁半月