一款带图标提示的分步式输入框,每一步都有操作提示文字,输入框的右侧都有一个图标,鼠标悬停有一个提示文字,最后会有一个提交成功的提示,整个输入框变成一个绿色的按钮,整体的效果还是挺好的,喜欢的童鞋请收下吧。
页面的head部分,需远程调用图标字体库font-awesome,并设置好页面元素的样式,代码如下:
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<style type="text/css">
*, *:before, *:after {
box-sizing: border-box;
transition: .5s ease-in-out;
}
body, html {
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
font-weight: 200;
position: relative;
height: 100%;
}
h1 {
font-size: 30px;
line-height: 30px;
font-weight: 200;
padding: 75px 0 50px 0;
text-align: center;
}
h1 .subtext {
opacity: .3;
}
.newsletter {
max-width: 400px;
margin: 50px auto;
position: relative;
}
.newsletter > span.container {
display: block;
width: 100%;
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
padding: 20px 10px 10px 10px;
opacity: 0;
}
.newsletter > span.container.active {
opacity: 1;
z-index: 2;
}
.newsletter > span.container.active + .submit {
z-index: 3;
top: 20px;
opacity: 1;
}
.newsletter > span.container > label {
display: block;
position: absolute;
top: -5px;
line-height: 18px;
}
.newsletter > span.container > label.fadeOut {
opacity: 0;
top: 10px;
}
.newsletter > span.container > input {
padding: 15px;
margin: 0;
width: 100%;
outline: none;
border: 1px solid #d1d1d1;
border-radius: 3px;
font-family: -apple-system, helvetica neue, helvetica, arial, sans-serif;
font-weight: 200;
font-size: 18px;
line-height: 18px;
}
.newsletter > span.container .next {
display: block;
position: absolute;
height: 53px;
width: 53px;
top: 20px;
right: 10px;
text-align: center;
border-radius: 0 3px 3px 0;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.newsletter > span.container .next:hover {
color: #22a31b;
cursor: pointer;
}
.newsletter > span.container .next:hover:before {
color: #22a31b;
}
.newsletter > span.container .next:before {
content: '\f061';
font-family: FontAwesome;
font-size: 18px;
font-weight: 200;
line-height: 51px;
color: #b6b6b6;
}
.newsletter > span.container span.error {
color: red;
position: absolute;
display: block;
width: 100%;
font-size: 12px;
line-height: 12px;
bottom: -10px;
}
.newsletter > span.submit {
display: block;
position: absolute;
height: 53px;
width: 53px;
top: 20px;
right: 10px;
text-align: center;
opacity: 0;
border-radius: 0 3px 3px 0;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
overflow: hidden;
background: #b6b6b6;
}
.newsletter > span.submit:hover {
background: #22a31b;
border-top: 1px solid #158010;
border-right: 1px solid #158010;
border-bottom: 1px solid #158010;
cursor: pointer;
}
.newsletter > span.submit:hover:before {
color: white;
}
.newsletter > span.submit:before {
content: '\f1d8';
font-family: FontAwesome;
font-size: 18px;
font-weight: 200;
line-height: 51px;
color: white;
}
.newsletter > span.submit:after {
content: "提交成功!";
display: block;
color: white;
font-weight: 400;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
height: 100%;
width: 100%;
line-height: 51px;
position: absolute;
top: 10px;
opacity: 0;
}
.newsletter > span.submit.submitted {
transition: 0.75s cubic-bezier(0.19, 1, 0.22, 1);
width: calc(100% - 20px);
background: #22a31b;
border: 1px solid #158010;
cursor: pointer;
border-radius: 3px;
}
.newsletter > span.submit.submitted:before {
color: white;
position: relative;
top: -50px;
right: -100px;
transition: .25s .75s ease-in-out;
}
.newsletter > span.submit.submitted:after {
top: 0;
opacity: 1;
color: white;
transition: .5s 1s ease-in-out;
}
.reset {
width: 100%;
margin-top: 138px;
text-align: center;
cursor: pointer;
color: #747474;
}
.reset:hover {
color: red;
}
</style>
页面body部分,主要是一个form表单加上一个带重置功能的div,代码如下:
<h1>请按提示操作</h1>
<form class="newsletter">
<span class="container active">
<label for="name">请输入您的姓名:</label>
<input class="required" type="text" id="name" name="name"/>
<span class="next" title="下一步"></span>
</span>
<span class="container">
<label for="email">请输入您的邮箱:</label>
<input class="required" type="email" id="email" name="email"/>
</span>
<span class="submit" title="提交"></span>
</form>
<div class="reset">重置表单</div>
页面的底部,需远程调用jQuery库和一个JS文件,并引入本地的一个JS文件,代码如下:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791