bubble气泡特效
生活随笔
收集整理的這篇文章主要介紹了
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-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>希望能給大家帶來點收獲。
總結
以上是生活随笔為你收集整理的bubble气泡特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PMP每日三题2022年2月11日
- 下一篇： scrapy拒绝访问