css特效登录页面样式 |css标题居中

/*登录页面样式代码*/
/*1. 背景动画*/
body {
background: url(../images/bg.jpg) center center no-repeat fixed;
background-size: cover;
}
/*2. 表单动画*/
form {
max-width: 500px;
width: 100%;
margin: 0 auto;
padding: 20px;
opacity: 0.9;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
input[type=submit]:hover {
background-color: #45a049;
}
/*3. 图标动画*/
.icon {
width: 100px;
height: 100px;
margin: 0 auto;
background: url(../images/icon.png) no-repeat;
background-size: contain;
animation: icon 1s infinite alternate;
}
@keyframes icon {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
/*4. 背景视频*/
#video-bg {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
background-size: cover;
opacity: 0.8;
}
video {
display: none;
}
/*以上是常见的登录页面特效，可根据实际需要灵活运用。*/

以上是常见的登录页面样式特效，它们可以帮助大家让网页更加生动和美观。当然，这些只是冰山一角，如果您有更好的创意或需求，可以加入更多的特效来增强登录页面的交互性和美感。相信经过设计师的巧妙运用，登录页面一定能成为吸引用户的“门面”，更好地为用户服务。