炫酷网站模板，css，html
炫酷网站模板，css，html
炫酷网站模板，css，html
html部分
<html><head><meta charset="UTF-8"><title>宠物诊所登录</title><link rel="stylesheet" href="css/indexStyle.css" /><link rel="stylesheet" href="css/iconfont.css" /></head><body><div id="login"><b>登录</b><form><table><tr><td><span class="iconfont icon-xingmingyonghumingnicheng"></span><input type="text" placeholder="用户名" /></td></tr><tr><td><span class="iconfont icon-mima "></span><input type="password" placeholder="密码"/></td></tr><tr><td><span class="iconfont icon-yanzhengma"></span><input type="text" placeholder="验证码"/></td></tr><tr><td><button type="submit">登录</button><button type="reset">重置</button></td></tr></table></form></div></body>
</html>
css部分
body{margin: 0;padding: 0;background: url(../img/boy.jpg);background-size: cover;
}#login{position: absolute;right: 15%;top: 140px;width: 230px;padding: 14px;background-color: rgba(0,0,0,0.6);height: 300px;box-shadow: 5px 1px 8px rgba(0,0,0,0.8);animation: mymove 1s infinite linear;
}
@keyframes mymove{ //css动画0%{box-shadow: 5px 1px 8px rgba(0,0,0,0.8);}25%{box-shadow: 5px 14px 28px rgba(0,0,0,0.8);}70%{box-shadow: 5px 1px 8px rgba(0,0,0,0.8);}100%{box-shadow: 5px 1px 8px rgba(0,0,0,0.8);}
}
#login >b{color: rgba(220,220,220,0.9);font-size: 18px;
}
#login td{position: relative;
}
#login input{width: 175px;height: 22px;padding: 5px;margin-top: 18px;
}
#login input{padding-left: 30px;font-size: 13px;border-radius: 5px;border: none;background-color: rgba(23,23,23,0.3);color: rgba(225,225,225,0.6);
}
#login input::-webkit-input-placeholder {color: #777;}
#login input::-moz-placeholder {color: #777;}
#login input::-ms-input-placeholder {color: #777;}
#login span{position: absolute;top: 26px;left: 8px;z-index: 999;color: rgba(225,225,225,0.8);}
#login button{padding: 6px 24px 6px 24px;border: none;font-size: 12px;border-radius: 5px;outline: none;cursor: pointer;background-color: rgba(0,0,0,0.7);color: rgba(225,225,225,0.6);
}
#login button[type="submit"]{position: absolute;top: 45px;left: 15px;
}
#login button[type="reset"]{position: absolute;right: 15px;top: 45px;
}
表单上的三个字体图标是从阿里矢量图标网站上下载的，百度一下就有教程，效果图如下。
背景图片来源：彼岸图网