以下是我的代码，我写了一个动态的背景，但引入bootstrap后就被覆盖了，
前端代码
<style>
.navbar {
border-radius:0
}
*{
/*初始化*/
margin:0;
padding:0;
}
.account {
width:500px;
border:2px solid #dddddd;
background-color: white;
border-radius:10px;
box-shadow:8px 10px 9px #aaa;
margin-left:auto;
margin-right:auto;
margin-top:130px;
padding:20px 40px;}
.account h2{
margin-top:10px;
text-align:center;}
body{
/100%窗口高度/
height:100vh;
/*弹性布局 居中*/
display:flex;
justify-content:center;
align-items:center;
/*渐变背景*/
background:linear-gradient(200deg,#e3c5eb,#a9c1ed);
/*溢出隐藏*/
overflow:hidden;}
ul li{
position:absolute;
border:1px solid #fff;
background-color:#fff;
width:30px;
height:30px;
list-style:none;
opacity:0;
}
.square li{
top:40vh;
left:60vw;
/* 执行动画 动画名 时长 线性的 无限次播放*/
animation:square 10s linear infinite;
}
.square li:nth-child(2){
top:80vh;
left:10vw;
/* 设置动画延迟时间*/
animation-delay:2s
}
.square li:nth-child(3){
top:80vh;
left:85vw;
/* 设置动画延迟时间*/
animation-delay:4s
}
.square li:nth-child(4){
top:10vh;
left:70vw;
/* 设置动画延迟时间*/
animation-delay:6s
}
.square li:nth-child(5){
top:10vh;
left:10vw;
/* 设置动画延迟时间*/
animation-delay:8s
@keyframes circle{
0%{
transform:scale(0) rotateY(0deg);
opacity:1;
bottom:0;
border-radius:0;
}
100%{
transform:scale(5) rotateY(1000deg);
opacity:0;
bottom:90vh;
border-radius:50%;
}
}
</style>
</head>
<body>
<div class="account">
<h2>用户登录</h2>
<form method="post" novalidate>
{%csrf_token%}
<div class="form-group">
<i class="fa fa-user-o" aria-hidden="true"></i>
用户名或手机号
{{form.username}}
<span style="color:red">{{form.username.errors.0}}</span>
</div>
<div class="form-group">
<i class="fa fa-key" aria-hidden="true"></i> 密码
{{form.password}}
<span style="color:red">{{form.password.errors.0}}</span>
</div>
<div class="form-group">
<label> <i class="fa fa-file-photo-o" aria-hidden="true"></i> 图片验证码</label>
<div class="row">
<div class="col-xs-7">
{{form.code}}
<span style="color:red">{{form.code.errors.0}}</span>
</div>
<div class="col-xs-5">
< img id="image_code" src="/image/code/" style="width:125px">
</div>
</div>
</div>
<input type="submit" value="登录" class="btn btn-info">
</form>
</div>
<div class="square">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="circle">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
ul li{
position:absolute;
border:1px solid #fff;
background-color:#fff;
width:30px;
height:30px;
list-style:none;
opacity:0;
}
.square li{
top:40vh;
left:60vw;
/* 执行动画 动画名 时长 线性的 无限次播放*/
animation:square 10s linear infinite;
}
.square li:nth-child(2){
top:80vh;
left:10vw;
/* 设置动画延迟时间*/
animation-delay:2s
}
.square li:nth-child(3){
top:80vh;
left:85vw;
/* 设置动画延迟时间*/
animation-delay:4s
}
.square li:nth-child(4){
top:10vh;
left:70vw;
/* 设置动画延迟时间*/
animation-delay:6s
}
.square li:nth-child(5){
top:10vh;
left:10vw;
/* 设置动画延迟时间*/
animation-delay:8s
}
.square li:nth-child(6){
top:40vh;
left:10vw;
/* 设置动画延迟时间*/
animation-delay:10s
}
.circle li{
bottom:0;
left:15vw;
animation:circle 10s linear infinite;
}
.circle li:nth-child(2){
left:35vw;
animation-delay:2s
}
.circle li:nth-child(3){
left:55vw;
animation-delay:6s
}
.circle li:nth-child(4){
left:75vw;
animation-delay:4s
}
.circle li:nth-child(5){
left:95vw;
animation-delay:8s
}
.circle li:nth-child(6){
left:855vw;
animation-delay:10s
}
@keyframes square{
0%{
transform:scale(0) rotateY(0deg);
opacity:1;
}
100%{
transform:scale(5) rotateY(1000deg);
opacity:0;
}
}
后端代码
def login(request):
"""登录"""
if request.method == 'GET':
form = LoginForm()
return render(request, 'login.html', {'form': form})
form = LoginForm(data=request.POST)
if form.is_valid():
# 验证成功,获取到的数据
# 验证码的校验
user_input_code = form.cleaned_data.pop('code')
code = request.session.get('image_code', '')
if code.upper() != user_input_code.upper():
form.add_error("code", "验证码错误") # 主动显示错误信息
return render(request, 'login.html', {'form': form})
# 去数据库校验用户名和密码是否正确
admin_object = models.admin.objects.filter(**form.cleaned_data).first()
if not admin_object:
form.add_error("password", "用户名或密码错误") # 主动显示错误信息
return render(request, 'login.html', {'form': form})
# 用户名或密码正确，网站随机生成字符串，写到用户浏览器的cookie中，在写入到session中
request.session['info'] = {"id": admin_object.id, "username": admin_object.username}
# 用户信息保存七天
request.session.set_expiry(60 * 60 * 24 * 7)
return redirect('/admin/list')
return render(request, 'login.html', {'form': form})
页面样式
