看看人家的气泡效果：
人家直接引入即可，超方便：
代码语言：javascript复制<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script>
<script>bubbly();</script>
</body>
</html>咱们再简单的创建一个登陆窗口，那么一个完美的登陆页面就出来了。
效果：
代码
代码语言：javascript复制<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
input {
font-size: 2rem;
border-radius: 9px;
outline: none;
}
p {
text-align: center;
}
#loginDiv {
width: 30%;
font-size: 2rem;
position: relative;
top: 50vh;
left: 70%;
}
</style>
<div id="loginDiv">
<p>
<input type="text" placeholder="请输入用户名">
</p>
<p>
<input type="text" placeholder="请输入mima" />
</p>
<p>
<input type="button" value="登录" />
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script>
<script>
bubbly();
</script>
</body>
</html>还能换个颜色什么的：
开始颜色和结束颜色都能改的哦
代码语言：javascript复制<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
input {
font-size: 2rem;
border-radius: 9px;
outline: none;
}
p {
text-align: center;
}
#loginDiv {
width: 30%;
font-size: 2rem;
position: relative;
top: 50vh;
left: 70%;
}
</style>
<div id="loginDiv">
<p>
<input type="text" placeholder="请输入用户名">
</p>
<p>
<input type="text" placeholder="请输入mim" />
</p>
<p>
<input type="button" value="登录" />
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script>
<script>
bubbly({
colorStart: "pink",
colorStop: "skyblue",
});
</script>
</body>
</html>希望能给大家带来点收获。
