话不多说
这个是主界面
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="button.css">
<link rel="stylesheet" href="register.css">
<link rel="stylesheet" href="title.css">
<link rel="stylesheet" href="ball.css">
<title>登陆界面</title>
</head>
<body>
<section>
<div class="ball" style="--x:0"></div>
<div class="ball" style="--x:1"></div>
<div class="ball" style="--x:2"></div>
<div class="ball" style="--x:3"></div>
<div class="ball" style="--x:4"></div>
<div class="ball" style="--x:5"></div>
<div class="ball" style="--x:6"></div>
<div id="bigBox">
<div class="title">
<svg width="50%" height="100%">
<text x="50%" y="70%" text-anchor="middle">
LOGIN
</text>
</svg>
</div>
<form class="inputBox">
<div class="inputText">
<input type="text" placeholder="Username">
</div>
<div class="inputText">
<input type="password" placeholder="Password">
<div class="buttons">
<button class="btn-hover color-7">SUBMIT</button>
</div>
<br>
<div class="register">
<span>No account?</span>
<a href="http://110.42.134.122/test/html/register.html"> Register now</a>
</div>
</div>
</form>
</div>
</section>
</body>
</html>
接下来是气泡的核心代码
.ball {
position: absolute;
background: rgba(255, 255, 255, 10);
backdrop-filter: blur(5px);
filter: hue-rotate(calc(var(--x) * 70deg));
animation: animate 10s linear infinite;
animation-delay: calc(var(--x) * -1s);
border-radius: 50%;
}
@keyframes animate {
0%, 100% {
transform: translateY(-100px);
}
25% {
transform: translateX(100px);
}
50% {
transform: translateY(100px);
}
75% {
transform: translateX(-100px);
}
}
//每一个child都是一个气泡，当鼠标悬停时气泡会发生变化
.ball:nth-child(1) {
background-color: #fffaaa30;
top: 300px;
right: 460px;
width: 100px;
height: 100px;
z-index: 1;
box-shadow: 3px 3px 1px #e566ce40;
transition: linear 200ms;
}
.ball:nth-child(1):hover {
background-color: #58e0f050;
top: 300px;
right: 460px;
width: 120px;
height: 120px;
box-shadow: 10px 10px 1px #e566ce40;
z-index: 1;
}
.ball:nth-child(2) {
background-color: #3df09a40;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
z-index: 2;
box-shadow: 3px 3px 1px #e566ce40;
transition: linear 200ms;
}
.ball:nth-child(2):hover {
background-color: rgba(61, 97, 240, 0.25);
top: 100px;
left: 100px;
width: 120px;
height: 120px;
box-shadow: 10px 10px 1px #e566ce40;
z-index: 2;
}
.ball:nth-child(3) {
background-color: #1de59e70;
bottom: 100px;
right: 100px;
width: 130px;
height: 130px;
z-index: 3;
box-shadow: 3px 3px 1px #e566ce40;
transition: linear 200ms;
}
.ball:nth-child(3):hover {
background-color: rgba(43, 201, 32, 0.44);
bottom: 100px;
right: 100px;
width: 150px;
height: 150px;
box-shadow: 10px 10px 1px #e566ce40;
z-index: 3;
}
.ball:nth-child(4) {
background-color: #e58c3c30;
top: 100px;
left: 540px;
width: 60px;
height: 60px;
box-shadow: 3px 3px 1px #e566ce40;
transition: linear 200ms;
}
.ball:nth-child(4):hover {
background-color: rgba(60, 229, 108, 0.30);
top: 100px;
left: 540px;
width: 80px;
height: 80px;
box-shadow: 10px 10px 1px #e566ce40;
}
.ball:nth-child(5) {
background-color: #e5d64830;
top: 480px;
left: 340px;
width: 120px;
height: 120px;
box-shadow: 3px 3px 1px #e566ce40;
transition: linear 200ms;
}
.ball:nth-child(5):hover {
background-color: rgba(204, 38, 53, 0.19);
top: 480px;
left: 340px;
width: 140px;
height: 140px;
box-shadow: 10px 10px 1px #e566ce40;
}
.ball:nth-child(6) {
background-color: #42b8f030;
top: 100px;
right: 100px;
width: 80px;
height: 80px;
box-shadow: 3px 3px 1px #e566ce40;
transition: linear 200ms;
}
.ball:nth-child(6):hover {
background-color: #77e55d40;
top: 100px;
right: 100px;
width: 100px;
height: 100px;
box-shadow: 10px 10px 1px #e566ce40;
}