与上一篇的“采用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%{backgrou