专注Php网页设计制作小程序开发外贸网站功能定制 - (承接设计制作/小程序手机站功能订制seo优化维护等) :673592626:280934751:865129233

电商资源网

简单漂亮的css3登录注册表单切换页面模板

所属栏目: 其它通用 更新时间: 2019-03-15
查看: 适用范围: V56 V57

内容介绍

简单漂亮的css3登录注册表单切换页面模板,橙色和红色渐变背景滑动切换动画也非常不错,带第三方登录按钮。

简单漂亮的css3登录注册表单切换页面模板

  <!DOCTYPE html>
  <html lang="en" >
   
  <head>
  <meta charset="UTF-8">
  <title>#026 - Double slider Sign in/up Form - Desktop Only</title>
   
  <!--图标样式-->
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css'>
   
  <link rel="stylesheet" href="css/style.css">
   
   
  </head>
   
  <body>
   
  <h2>简单的两个 #1: 登录/注册 表单</h2>
  <div class="container" id="container">
  <div class="form-container sign-up-container">
  <form action="#">
  <h1>注册</h1>
  <div class="social-container">
  <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
  <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
  <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
  </div>
  <span>第三方账号注册</span>
  <input type="text" placeholder="名称" />
  <input type="email" placeholder="邮箱" />
  <input type="password" placeholder="密码" />
  <button>注册</button>
  </form>
  </div>
  <div class="form-container sign-in-container">
  <form action="#">
  <h1>登录</h1>
  <div class="social-container">
  <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
  <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
  <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
  </div>
  <span>第三方账号登录</span>
  <input type="email" placeholder="邮箱" />
  <input type="password" placeholder="密码" />
  <a href="#">忘记密码?</a>
  <button>登录</button>
  </form>
  </div>
  <div class="overlay-container">
  <div class="overlay">
  <div class="overlay-panel overlay-left">
  <h1>欢迎回来!</h1>
  <p>请您先登录的个人信息,进行操作。</p>
  <button class="ghost" id="signIn">登录</button>
  </div>
  <div class="overlay-panel overlay-right">
  <h1>你好朋友!</h1>
  <p>输入您的个人信息注册成为会员。</p>
  <button class="ghost" id="signUp">注册</button>
  </div>
  </div>
  </div>
  </div>
   
  <footer>
  <p>
  版权声明
  </p>
  </footer>
   
   
   
  <script src="js/index.js"></script>
   
   
   
   
  </body>
   
  </html>
   

测试地址:http://demo.demohuo.top/modals/55/5535/demo/

顶一下
(0)
0%
踩一下
(0)
0%
下载说明

☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:92dianshangcom。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。

标签: 注册登录
分享:
 
QQ在线咨询
下载声明:

本站所有模板和资料均为软件作者提供或网友推荐发布而来,仅供学习和研究使用,不得用于任何商业用途。如本站不慎侵犯你的版权请联系我,我将及时处理,并撤下相关内容!

文件信息:

文件名称:简单漂亮的css3登录注册表单切换页面模板

上传日期:2019-03-15

如无特殊说明,解压密码为:www.92dianshang.com,使用 WinRAR、7-Zip 等各种压缩工具均能解压。