div+css实现科技感登录表单页面代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现科技感登录表单页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
html {
background: #000;
background-size: cover;
font-size: 10px;
height: 100%;
overflow: hidden;
position: absolute;
text-align: center;
width: 100%;
}
/* =========================================
Stark Industries Logo
========================================= */
#logo {
animation: logo-entry 4s ease-in;
width: 500px;
margin: 0 auto;
position: relative;
z-index: 40;
}
h1.hogo {
animation: text-glow 2s ease-out infinite alternate;
font-family: 'Ubuntu', sans-serif;
color: #00a4a2;
font-size: 48px;
font-size: 4.8rem;
font-weight: bold;
position: absolute;
text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 30px #000, 0 0 40px #000, 0 0 50px #000, 0 0 60px #000, 0 0 70px #000;
top: 50px;
}
h1.hogo:before {
animation: before-glow 2s ease-out infinite alternate;
border-left: 535px solid transparent;
border-bottom: 10px solid #00a4a2;
content: ' ';
height: 0;
position: absolute;
right: -74px;
top: -10px;
width: 0;
}
h1.hogo:after {
animation: after-glow 2s ease-out infinite alternate;
border-left: 100px solid transparent;
border-top: 16px solid #00a4a2;
content: ' ';
height: 0;
position: absolute;
right: -85px;
top: 24px;
transform: rotate(-47deg);
width: 0;
}
/* =========================================
Log in form
========================================= */
#fade-box {
animation: input-entry 3s ease-in;
z-index: 4;
}
.stark-login form {
animation: form-entry 3s ease-in-out;
background: #111;
background: linear-gradie.........完整代码请登录后点击上方下载按钮下载查看
网友评论0