layui实现背景变色带鼠标足迹的登录页面效果代码-html代码-BFW代码库

layui实现背景变色带鼠标足迹的登录页面效果代码

代码语言：html

代码描述：layui实现背景变色带鼠标足迹的登录页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="referrer" content="no-referrer" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

<style>
    .login-main{width: 100%;height:100%;position: relative;animation-name: mainanim;animation-duration: 8s;animation-iteration-count: infinite;}
    .login-layout{width: 540px;height: 310px;position: absolute;top:50%;left: 50%;margin-top: -155px ;margin-left: -270px;background: #FFFFFF;border-radius: 4px;z-index: 99; box-shadow: 0px 0px 5px #FFFFFF}
    .login-layout{animation-name:degframe ;animation-duration: 2s;}
    .login-input{width: 90%;}
    @keyframes mainanim {
    0% {background-color: #169af3;}
    20% {background-color: #e4007e;}
    40% {background-color: #FFB800;}
    60% {background-color: #009688;}
    80% {background-color: #FF5722;}
    100% {background-color: #169af3;}
    }
    @keyframes degframe {
    from{transform: rotateY(0deg);}
    to{transform: rotateY(360deg);}
    }
</style>
</head>
<body>
    <div class="login-main">
        <div class="login-layout">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 25px;text-align: center">
                <legend>登录</legend>
            </fieldset>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">账号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="account" lay-verify="account" autocomplete="off" placeholder="请输入您的账号" class="layui-input login-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码：</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" lay-verify="password" placeholder="请输入您的密码" autocomplete="off" class="layui-input login-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">验证码：</label>
                    .........完整代码请登录后点击上方下载按钮下载查看