css实现背景走光动画的登录表单页面效果代码-html代码-BFW代码库

css实现背景走光动画的登录表单页面效果代码

代码语言：html

代码描述：css实现背景走光动画的登录表单页面效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <title></title>
    <style>
        @charset "utf-8";
    /* CSS Document */
    * {
    	margin: 0;
    	padding: 0
    }
    ul li {
    	list-style: none
    }
    img {
    	border: 0;
    	max-width: 100%;
    }
    a {
    	text-decoration: none;
    	color: #333
    }
    .clear {
    	clear: both
    }
    body {
    	font-family: "微软雅黑";
    	width: 100%;
    	margin: 0;
    	width: 100%;
    	height: 100vh;
    	color: #fff;
    	background: linear-gradient(-45deg, #231f6e, #20bdfe, #2600b4, #1d1a44);
    	background-size: 400% 400%;
    	animation: gradientBG 15s ease infinite;
    	overflow: hidden
    }
    @keyframes gradientBG {
    	0% {
    		background-position: 0% 50%;
    	}
    	50% {
    		background-position: 100% 50%;
    	}
    	100% {
    		background-position: 0% 50%;
    	}
    }
    a:hover {
    	text-decoration: underline
    }
    .loginBox {
    	width: 520px;
    	height: 500px;
    	background: url(//repo.bfw.wiki/bfwrepo/images/login/4/bg.png) no-repeat;
    	background-size: 100% 100%;
    	margin: 0 auto;
    	overflow: hidden
    }
    .loginBox h1 {
    	color: #fff;
    	text-align: center;
    	font-weight: bold;
    	font-size: 26px;
    	margin-top: 90px;
    	letter-spacing: 7px;
    	margin-bottom: 20px
    }
    .loginBox .item {
    	width: 300px;
    	height: 45px;
    	margin-left: 105px;
    	border: 1px solid #1d90c5;
    	margin-bottom: 10px;
    	background: rgba(11,116,180,0.8);
    	display: flex
    }
    .loginBox .item .icon {
    	float: left;
    	width: 45px;
    }
    .loginBox .item .icon img {
    	display: block;
    	width: 20px;
    	margin: 12px;
    }
    .loginBox .item .txt {
    	flex: 1;
    }
    .loginBox .item .txt input {
    	border: 0;
    	background: none;
    	outline: none;
    	width: 100%;
    	height: 45px;
    	line-height: 45px;
    	color: #fff;
    	letter-spacing: 1px;
    	font-size: 14px
    }
    .loginBox .item .yzm {
    	float: right;
    	width: 100px;
    	overflow: hidden;
    	padding-left: 10px
    }
    .loginBox .item .yzm img {
    	display: block;
    	width: 100px;
    	height: 45px;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
     color: #fff;
    opacity:1;
    }
    
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
     color: #fff;
    opacity:1;
    }
     input:-ms-input-placeholder {
     color: #fff;
    opacity:1;
    }
     input::-webkit-input-placeholder {
     color: #fff;
    opacity:1;
    }
    .loginBox .item_2 {
    	width: 300px;
    	margin-left: 105px;
    	overflow: hidden;
    	padding-bottom: 20px
    }
    .loginBox .item_2 a {
    	float: right;
    	color: #fff;
    	font-size: 12px
    }
    .loginBox .item_2 input {
    	float: left;
    }
    .loginBox .item_2 span {
    	float: left;
    	color: #fff;
    	font-size: 12px
    }
    .loginBox .item_3 {
    	width: 300px;
    	margin-left: 105px;
    	overflow: hidden
    }
    .loginBox .item_3 .btn {
    	width: 300px;
    	height: 45px;
  .........完整代码请登录后点击上方下载按钮下载查看