css气泡动画特效演示

话不多说这个是主界面<!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"

Calendo

1902人浏览 · 2021-11-01 21:51:01

Calendo · 2021-11-01 21:51:01 发布

在这里插入图片描述
话不多说

这个是主界面

<!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;
}