ZUI框架加GitHub开源项目做出炫酷粒子效果的登录界面

要注意几点:

1.要使用绝对布局,子绝父相,body为相对定位,粒子效果和使用ZUI框架的面板的div为绝对定位,不能使用flex布局

2.输入框要在粒子效果上面,使用z-index

3.输入框面板的宽度不能写死,要使用百分比,使用margin-left实现左右居中,因为magin:0 auto;使用不了。

4.借鉴GitHub开源项目,https://github.com/VincentGarreau/particles.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员登录</title>
    <link rel="stylesheet" href="./dist/css/zui.min.css">
    <link rel="stylesheet" media="screen" href="css/style.css">
</head>

<body>
    <div id="particles-js"></div>
    <div class="panel" id="main-content">
        <div class="panel-heading" style="text-align: center; font-size: 18px;font-weight: bold;">
            管理平台
        </div>
        <div class="panel-body">
            <div class="input-group with-padding">
                <span class="input-group-addon">用户</span>
                <input type="text" class="form-control" placeholder="请输入用户">
            </div>
            <div class="input-group with-padding">
                <span class="input-group-addon">密码</span>
                <input type="password" class="form-control" placeholder="请输入密码">
            </div>
            <div class="input-group with-padding">
                <span class="input-group-addon">验证码</span>
                <input type="text" class="form-control" placeholder="请输入验证码">
                <span class="input-group-addon fix-border fix-padding"></span>
                <img src="./image/1.png" class="form-control">
            </div>
            <div class="with-padding">
                <button class="btn btn-block" style="background-color: #6097EE;color: white;font-size: 18px;font-weight: bold;" type="button">登录</button>
            </div>
        </div>
    </div>
    <!-- scripts -->
    <script src="./js/particles.js"></script>
    <script src="js/app.js"></script>

    <!-- stats.js -->
    <script src="js/lib/stats.js"></script>
    <script>
        var count_particles, stats, update;
        stats = new Stats;
        stats.setMode(0);
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        document.body.appendChild(stats.domElement);
        count_particles = document.querySelector('.js-count-particles');
        update = function() {
            stats.begin();
            stats.end();
            requestAnimationFrame(update);
        };
        requestAnimationFrame(update);
    </script>
</body>
<script src="./dist/lib/jquery/jquery.js"></script>
<script src="./dist/js/zui.min.js"></script>

</html>

效果图

发布了143 篇原创文章 · 获赞 92 · 访问量 8879

猜你喜欢

转载自blog.csdn.net/weixin_42995083/article/details/105110169