网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
基于html5+css3实现的注册和登陆表单切换特效代码。使用了Normalize.css 使浏览器呈现所有 HTML 元素更加一致,并且符合现代 web 标准。
1.在页面头部加载样式文件。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
2.在页面底部添加表单切换js文件。
<script src="./script.js"></script>
3.添加注册和登陆表单html代码,如下所示:
<div class="container right-panel-active">
<!-- Sign Up -->
<div class="container__form container--signup">
<form action="#" class="form" id="form1">
<h2 class="form__title">注册</h2>
<input type="text" placeholder="用户名" class="input" />
<input type="email" placeholder="邮箱" class="input" />
<input type="password" placeholder="密码" class="input" />
<button class="btn">注册</button>
</form>
</div>
<!-- Sign In -->
<div class="container__form container--signin">
<form action="#" class="form" id="form2">
<h2 class="form__title">登陆</h2>
<input type="email" placeholder="邮箱" class="input" />
<input type="password" placeholder="密码" class="input" />
<a href="#" class="link">忘记密码?</a>
<button class="btn">登陆</button>
</form>
</div>
<!-- Overlay -->
<div class="container__overlay">
<div class="overlay">
<div class="overlay__panel overlay--left">
<button class="btn" id="signIn">登陆</button>
</div>
<div class="overlay__panel overlay--right">
<button class="btn" id="signUp">注册</button>
</div>
</div>
</div>
</div>
转载请注明来源:简单的登陆和注册表单界面切换过渡css3动画特效
本文永久链接地址:https://www.moyouyouw.cn/code/954.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论