下雨代码装逼黑客
效果:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="box">
<div class="daima">
<div class="dai-top">
<span></span>
<span style="background-color: rgba(210, 210, 15, 0.788);"></span>
<span style="background-color: #2145a2; font-size: 10px;"></span>
</div>
<div contenteditable="true" class="text">
<pre>
</pre>
</div>
</div>
<div class="dian">
<div class="tt">
<h3>已安全</h3>
</div>
</div>
<div class="jj"></div>
</div>
<script src="./index.js"></script>
</body>
</html>
css:cs
*{
margin: 0;
padding: 0;
}
body{
background-image: url(./bg.gif);
}
.box{
width: 700px;
height: 800px;
/* background-color: tan; */
margin: 40px auto;
}
.box .daima{
width: 700px;
height: 450px;
margin: auto;
background-color: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(247, 247, 247, 0.7);
overflow: hidden;
border-radius: 5px ;
}
.box .daima .dai-top{
width: 700px;
height: 30px;
background-color: rgba(247, 247, 247, 0.7);
}
.box .daima .dai-top span{
float: left;
width: 16px;
height: 16px;
margin-left: 7px;
margin-top: 5px;
background-color: #e32626;
border-radius: 50%;
text-align: center;
line-height: 12px;
font-size: 12px;
cursor: pointer;
}
.box .daima .dai-top p{
text-align: center;
}
.box .daima .text{
/* background-color: red; */
width: 640px;
height: 420px;
color: #fff;
float: right;
/* text-align: center; */
outline: none;
overflow-y: scroll;
}
::-webkit-scrollbar{
display: none;
}
.box .dian{
width: 400px;
height: 250px;
margin: auto;
margin-top: 30px;
background-color: rgb(65, 65, 65);
overflow: hidden;
border-radius: 10px;
}
.box .dian .tt{
width: 370px;
height: 220px;
margin: auto;
margin-top: 12px;
/* background-color: aquamarine; */
text-align: center;
overflow: hidden;
/* margin-top: 100px; */
animation: oz 5s infinite;
}
@keyframes oz{
0%{
background-color: #4c26e3;
}
20%{
background-color: #e32626;
}
40%{
background-color: #e3c026;
}
60%{
background-color: #26e35b;
}
80%{
background-color: #26e3d6;
}
100%{
background-color: #4c26e3;
}
}
.box .dian .tt h3{
margin-top: 80px;
font-size: 30px;
}
.box .jj{
width: 500px;
height: 20px;
background-color: #fff;
margin: auto;
border-radius: 0 0 15px 15px;
}
需要的svg: