利用HTML5实现载入登录表单代码



23 91 31



特效描述:利用HTML5实现 载入登录 表单代码,利用HTML5实现载入登录表单代码  

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script  src="js/index.js"></script>

3. HTML代码

<main>
	<form class="form">
		<div class="form__cover"></div>
		<div class="form__loader">
			<div class="spinner active">
				<svg class="spinner__circular" viewBox="25 25 50 50">
					<circle class="spinner__path" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10"></circle>
				</svg>
			</div>
		</div>
		<div class="form__content">
			<h1>Authorization</h1>
			<div class="styled-input">
				<input type="text" class="styled-input__input" name="nickname">
				<div class="styled-input__placeholder">
					<span class="styled-input__placeholder-text">Username</span>
				</div>
				<div class="styled-input__circle"></div>
			</div><div class="styled-input">
				 <input type="text" class="styled-input__input">
				<div class="styled-input__placeholder">
					<span class="styled-input__placeholder-text">Password</span>
				</div>
				<div class="styled-input__circle"></div>
			</div>
			<button type="button" class="styled-button">
				<span class="styled-button__real-text-holder">
					<span class="styled-button__real-text">Submit</span>
					<span class="styled-button__moving-block face">
						<span class="styled-button__text-holder">
							<span class="styled-button__text">Submit</span>
						</span>
					</span><span class="styled-button__moving-block back">
						<span class="styled-button__text-holder">
							<span class="styled-button__text">Submit</span>
						</span>
					</span>
				</span>
			</button>
		</div>
	</form>
</main>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 登录框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到