js实现动态背景登录框效果代码-html代码-BFW代码库

js实现动态背景登录框效果代码

代码语言：html

所属分类：背景

代码描述：js实现动态背景登录框效果代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
    *{
    margin:0;
    padding:0;
    font-size: 13px;
    font-family: "Microsoft YaHei";
}
html,body{
    width:100%;
    height:100%;
    background: #fff;
}
#container {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index: 999;
}
#output {
    width: 100%;
    height: 100%;
}
.prompt{
    width:60%;
    height:30px;
    margin:5px auto;
    text-align: center;
    line-height: 30px;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 13px;
    color: #df0000;
}
.containerT {
    width:400px;
    height:300PX;
    text-align: center;
    position: absolute;
    top:50%;
    left:50%;
    margin:-150px 0 0 -200px;
    border-radius: 3px;
}
.containerT h1 {
    font-size:18px;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: ease-in-put;
    transition-timing-function: ease-in-put;
    font-weight:500;
}
form {
    padding: 20px 0;
    position: relative;
    z-index: 2;
}
form input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.2);
    width: 200px;
    border-radius: 3px;
    padding: 8px 15px;
    margin: 0 auto 10px auto;
    display: block;
    text-align: center;
    font-size:15px;
    color: white;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    font-weight: 300;
}
form input:hover {
    background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
    background-color: white;
    width:230px;
    color: #333;
}
form button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    background-color: white;
    border: 0;
    padding: 10px 15px;
    color: #333;
    border-radius: 3px;
    width: 200px;
    cursor: pointer;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
}
form button:hover {
    background-color: #f5f7f9;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" >
    CAV={FRONT:0,BACK:1,DOUBLE:2,SVGNS:"http://www.w3.org/2000/svg"};CAV.Array=typeof Float32Array==="function"?Float32Array:Array;CAV.Utils={isNumber:function(a){return!isNaN(parseFloat(a))&&isFinite(a)}};
(function(){for(var a=0,b=["ms","moz","webkit","o"],c=0;c<b.length&&!window.requestAnimationFrame;++c)window.requestAnimationFrame=window[b[c]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[b[c]+"CancelAnimationFram.........完整代码请登录后点击上方下载按钮下载查看