#yyds干货盘点#——分享bubble特效-CFANZ编程社区

#yyds干货盘点#——分享bubble特效

看看人家的气泡效果：

#yyds干货盘点#——分享bubble特效_.net

人家直接引入即可，超方便：

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

咱们再简单的创建一个登陆窗口，那么一个完美的登陆页面就出来了。

效果：

#yyds干货盘点#——分享bubble特效_html_02

代码

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

还能换个颜色什么的：

#yyds干货盘点#——分享bubble特效_.net_03

开始颜色和结束颜色都能改的哦

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

希望能给大家带来点收获。

0 条评论