Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
#wraper {
	/* background-image:url("../images/image1.jpg");
	*/
    background-size:100%;
	transition:all 2s;
	/* 实现模糊效果 - 值越大越模糊 */
    -webkit-filter:blur(10px);
	/* Chrome,Opera */
    -moz-filter:blur(10px);
	-ms-filter:blur(10px);
	filter:blur(10px);
}
.form {
	position:absolute;
	top:20%;
	left:50%;
	transform:translate(-50%);
	width:30%;
	min-width:240px;
	/* border:1px solid #000;
	*/
    border-radius:10px;
	box-sizing:border-box;
	padding:20px 20px;
	background-color:rgba(52,0,95,0.377);
	box-shadow:1px 1px 1px 1px rgba(0,0,0,0.616);
}
.form label {
	display:block;
	width:30%;
	min-width:100px;
	float:left;
	height:40px;
	line-height:40px;
	margin:10px 0;
	font-size:18px;
	color:#fff;
}
.form input {
	width:70%;
	min-width:200px;
	box-sizing:border-box;
	height:40px;
	margin:10px 0;
	background-color:#ffffff00;
	border:1px solid #eee;
	border-radius:20px;
	outline:none;
	padding:0 10px;
	box-sizing:border-box;
	font-size:18px;
	color:#eee;
}
.form button {
	width:70%;
	height:40px;
	background-color:rgba(255,255,255,0);
	/* border:1px solid #fff;
	*/
    background-color:rgba(42,0,48,0.438);
	border:none;
	border-radius:20px;
	color:#eee;
	font-size:18px;
	margin:10px 0 10px 30%;
	outline:none;
	cursor:pointer;
}
.form button:hover {
	/* border:none;
	*/
    background-color:rgba(42,0,48,0.548);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.9.1
 立即下载

全屏背景切换

0