看看人家的气泡效果：
人家直接引入即可，超方便：
<!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>
希望能给大家带来点收获。
