经验分享程序开发文档资料数据资源其它资源

CSS3个人资料填写表单js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3个人资料填写表单js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

CSS3个人资料填写表单js代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3个人资料填写表单</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
<section class='container'>
<!-- / Form -->
<form>
<!-- / Header -->

<!-- / Fieldset Alpha -->
<fieldset class='alpha'>
<legend><b>1.</b> Your Info</legend>
<div class='frow'>
<input class='item' placeholder='Username' type='text'>
</div>
<div class='frow'>
<input class='item' placeholder='Email' type='email'>
</div>
<div class='frow'>
<input class='item' placeholder='Password' type='password'>
</div>
<div class='frow'>
<a class='next-step' href='#'>Let's go!</a>
</div>
</fieldset>
<!-- / Fieldset Beta -->
<fieldset class='beta'>
<legend><b>2.</b>Your Social Profiles</legend>
<div class='frow'>
<input class='item' placeholder='CodePen' required='required' type='url'>
</div>
<div class='frow'>
<input class='item' placeholder='Dribbble' required='required' type='url'>
</div>
<div class='frow'>
<input class='item' placeholder='Behance' required='required' type='url'>
</div>
<div class='frow'>
<a class='prev-step' href='#'>Go back!</a>
</div>
<div class='frow'>
<input class='submit' type='submit' value="I'm all done!">
</div>
</fieldset>
<!-- / Fieldset Charlie -->
<fieldset class='charlie'>
<legend><b>3.</b>Your All Done</legend>
<div class='frow'>
<p>Thanks</p>
</div>
</fieldset>
</form>
</section>
<script src='js/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

jQuery(document).ready(function(){
	function doStep(){
	// Next Button $('a.next-step').click(function(event){
	event.preventDefault();
	// Part 1 if($('.alpha').hasClass("in")){
	$('.alpha').removeClass("in");
}
$('.alpha').addClass("out");
	// Part 2 if($('.beta').hasClass("out")){
	$('.beta').removeClass("out");
}
$('.beta').addClass("in");
}
);
	// Previous Button $('a.prev-step').click(function(event){
	event.preventDefault();
	$('.alpha').removeClass("out").addClass("in");
	$('.beta').removeClass("in").addClass("out");
}
);
	// Submit & Complete $('.submit').click(function(event){
	event.preventDefault();
	// Part 1 if($('.beta').hasClass("in")){
	$('.beta').removeClass("in");
}
$('.beta').addClass("out");
	// Part 2 if($('.charlie').hasClass("out")){
	$('.charlie').removeClass("out");
}
$('.charlie').addClass("in");
}
);
}
// Active Functions doStep();
}
);

CSS代码(style.css):

*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body,html{margin:0;padding:0;height:100%;background:#000;background-image:url("hexabump.png");font-size:16px;}
body{padding:25px;z-index:-1;}
body::before{display:block;position:absolute;content:"";top:0;right:0;left:0;height:8px;opacity:1;z-index:0;background:#31dddb;box-shadow:0 9px 0 rgba(255,255,255,0.1);}
.container{display:block;position:relative;margin:0 auto;width:100%;max-width:400px;min-width:300px;}
h3{color:#fff;font-size:2em;font-weight:bold;font-family:"Lato",sans-serif;text-shadow:0 0 10px #000;text-align:center;}
p{color:#555;clear:both;}
form{float:left;display:block;width:100%;position:relative;}
form fieldset{float:left;position:absolute;width:100%;padding:20px;border:none;border-radius:5px;box-shadow:0 0 15px rgba(0,0,0,0.7);background:#fff;background:whitesmoke;background:-webkit-linear-gradient(0deg,#eeeeee 0%,whitesmoke 100%);background:-moz-linear-gradient(0deg,#eeeeee 0%,whitesmoke 100%);background:-o-linear-gradient(0deg,#eeeeee 0%,whitesmoke 100%);background:linear-gradient(0deg,#eeeeee 0%,whitesmoke 100%);/* W3C */
}
form fieldset legend{float:left;display:block;width:100%;position:relative;border-bottom:1px solid #dfdfdf;top:0;left:0;clear:both;margin-bottom:20px;padding-bottom:10px;line-height:30px;color:#444;text-shadow:0 1px 0 #fff;}
form fieldset.beta,form fieldset.charlie{display:none;}
form fieldset .frow{float:left;display:block;width:100%;margin-bottom:10px;}
form fieldset .frow:last-child{margin-bottom:0px;}
form fieldset input{float:left;width:100%;padding:12px 6px;font-size:14px;font-weight:400;font-family:"Open Sans",sans-serif;border:1px solid #dedede;border-radius:5px;box-shadow:0 0 0 transparent,inset 0 0 5px #eee;-webkit-transition:all 0.2s ease-in-out;}
form fieldset input::-webkit-input-placeholder{color:#ccc;opacity:1;-webkit-transition:opacity 0.2s ease-in-out;}
form fieldset input:focus{outline:none;border:1px solid #27c1bf;box-shadow:0 0 10px #27c1bf;-webkit-transition:all 0.2s ease-in-out;}
form fieldset input:focus::-webkit-input-placeholder{opacity:0.5;}
form fieldset a.next-step,form fieldset a.prev-step,form fieldset input[type="submit"]{display:block;width:100%;height:50px;padding:0;background:#31dddb;line-height:50px;text-align:center;text-decoration:none;text-shadow:0px 1px 2px rgba(0,0,0,0.3);font-size:1.2em;font-family:"Helvetica Neue",sans-serif;font-weight:400;color:#fff;border:1px solid #27c1bf;border-radius:4px;box-shadow:0 0 0 transparent;}
form fieldset a.prev-step{background:#4a76a8;border:1px solid #1d5b90;}
.out,.alpha.out,.beta.out{z-index:0;opacity:1;display:block;-webkit-animation:out 0.75s ease forwards;-moz-animation:out 0.75s ease forwards;-o-animation:out 0.75s ease forwards;animation:out 0.75s ease forwards;}
@-webkit-keyframes out{0%{-webkit-transform:scale(1);opacity:1;}
25%{-webkit-transform:scale(1.05);}
99%{-webkit-transform:scale(0.8);}
100%{opacity:0;display:none;}
}
@-moz-keyframes out{0%{-moz-transform:scale(1);opacity:1;}
25%{-moz-transform:scale(1.05);}
99%{-moz-transform:scale(0.8);}
100%{opacity:0;display:none;}
}
@-o-keyframes out{0%{-o-transform:scale(1);opacity:1;}
25%{-o-transform:scale(1.05);}
99%{-o-transform:scale(0.8);}
100%{opacity:0;display:none;}
}
@keyframes out{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1;}
25%{-webkit-transform:scale(1.05);transform:scale(1.05);}
99%{-webkit-transform:scale(0.8);transform:scale(0.8);}
100%{opacity:0;display:none;}
}
.in,.beta.in{z-index:30;display:block;opacity:0;-webkit-animation:in 0.75s ease forwards 0.25s;-moz-animation:in 0.75s ease forwards 0.25s;-o-animation:in 0.75s ease forwards 0.25s;animation:in 0.75s ease forwards 0.25s;}
@-webkit-keyframes in{0%{-webkit-transform:translate3d(150px,0,0);opacity:0;}
100%{-webkit-transform:translate3d(0px,0,0);opacity:1;}
}
@-moz-keyframes in{0%{-moz-transform:translate3d(150px,0,0);opacity:0;}
100%{-moz-transform:translate3d(0px,0,0);opacity:1;}
}
@-o-keyframes in{0%{-o-transform:translate3d(150px,0,0);opacity:0;}
100%{-o-transform:translate3d(0px,0,0);opacity:1;}
}
@keyframes in{0%{-webkit-transform:translate3d(150px,0,0);-moz-transform:translate3d(150px,0,0);-o-transform:translate3d(150px,0,0);transform:translate3d(150px,0,0);opacity:0;}
100%{-webkit-transform:translate3d(0px,0,0);-moz-transform:translate3d(0px,0,0);-o-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0);opacity:1;}
}
.alpha.in{z-index:30;display:block;opacity:0;-webkit-animation:in-prev 0.75s ease forwards 0.25s;-moz-animation:in-prev 0.75s ease forwards 0.25s;-o-animation:in-prev 0.75s ease forwards 0.25s;animation:in-prev 0.75s ease forwards 0.25s;}
@-webkit-keyframes in-prev{0%{-webkit-transform:translate3d(-150px,0,0);opacity:0;}
100%{-webkit-transform:translate3d(0px,0,0);opacity:1;}
}
@-moz-keyframes in-prev{0%{-moz-transform:translate3d(-150px,0,0);opacity:0;}
100%{-moz-transform:translate3d(0px,0,0);opacity:1;}
}
@-o-keyframes in-prev{0%{-o-transform:translate3d(-150px,0,0);opacity:0;}
100%{-o-transform:translate3d(0px,0,0);opacity:1;}
}
@keyframes in-prev{0%{-webkit-transform:translate3d(-150px,0,0);-moz-transform:translate3d(-150px,0,0);-o-transform:translate3d(-150px,0,0);transform:translate3d(-150px,0,0);opacity:0;}
100%{-webkit-transform:translate3d(0px,0,0);-moz-transform:translate3d(0px,0,0);-o-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0);opacity:1;}
}
.charlie.in{z-index:30;display:block;opacity:0;-webkit-animation:in-charlie 0.75s ease-out forwards 0.25s;-moz-animation:in-charlie 0.75s ease-out forwards 0.25s;-o-animation:in-charlie 0.75s ease-out forwards 0.25s;animation:in-charlie 0.75s ease-out forwards 0.25s;}
@-webkit-keyframes in-charlie{0%{-webkit-transform:translate3d(0,150px,0);opacity:0;}
100%{-webkit-transform:translate3d(0,0,0);opacity:1;}
}
@-moz-keyframes in-charlie{0%{-moz-transform:translate3d(0,150px,0);opacity:0;}
100%{-moz-transform:translate3d(0,0,0);opacity:1;}
}
@-o-keyframes in-charlie{0%{-o-transform:translate3d(0,150px,0);opacity:0;}
100%{-o-transform:translate3d(0,0,0);opacity:1;}
}
@keyframes in-charlie{0%{-webkit-transform:translate3d(0,150px,0);-moz-transform:translate3d(0,150px,0);-o-transform:translate3d(0,150px,0);transform:translate3d(0,150px,0);opacity:0;}
100%{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
35.02 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
35.02 KB
立即下载
穆香露
了解
打赏作者 鼓励作者
Html 表单代码2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章