bubble气泡特效
【摘要】 看看人家的气泡效果：人家直接引入即可，超方便：<!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-b...
看看人家的气泡效果：
人家直接引入即可，超方便：
<!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>咱们再简单的创建一个登陆窗口，那么一个完美的登陆页面就出来了。
效果：
代码
<!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>还能换个颜色什么的：
开始颜色和结束颜色都能改的哦
<!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>希望能给大家带来点收获。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）