酷炫的登录表单动画效果【原创

来源:https://www.sucaihuo.com/js/2833.html 2017-08-24 23:31浏览(2896) 收藏

一款酷炫的登录表单动画效果,输入用户信息之后点击登录按钮(表单验证可自行添加),按钮立即变成圆环旋转的加载动画,数秒钟后颜色填充整个窗口并切换到登录后的用户界面,里面有一些消息提示和日期显示效果。
酷炫的登录表单动画效果
分类:文字特效 > 文字列表 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入一个页面的CSS样式文件,代码如下:

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

页面的body部分,用了多个div容器的排列或div容器的嵌套结构,代码如下:

<div class="main">
  <div class="bg"></div>
  <div class="bg2"></div>
  <div class="top">
    <div class="top-contents">
      <svg class="hamburger" xmlns="http://www.w3.org/2000/svg" width="36" height="60" viewBox="0 0 36 60"><path d="M9 33.727h20M9 41h20M9 48.273h20" fill="#fff" fill-rule="evenodd" stroke="#fff" stroke-width="1.818"/></svg>
      <svg class="magnifier" xmlns="http://www.w3.org/2000/svg" width="36" height="60" viewBox="0 0 36 60"><g transform="translate(0 -992.362)" stroke="#fff" stroke-width="1.816"><circle cx="17.734" cy="1030.556" r="8.826" fill="none" stroke-linejoin="round"/><path d="M23.924 1037.09l5.158 4.356" fill="#fff" fill-rule="evenodd" stroke-linecap="round"/></g></svg>
      <div class="goodmorning">Good Morning!</div>
      <div class="user">
        <img class="tachina" src="http://www.sucaihuo.com/other/avatar/dir/905.jpg">
        <div class="notification">3</div>
      </div>
      <div class="left-arrow"></div>
      <div class="month">FEBRUARY</div>
      <div class="right-arrow"></div>
    </div>
  </div>
  <div class="calendar">
    <div class="calendar-contents">
      <div class="days">
        <div>SUN</div>
        <div>MON</div>
        <div>TUE</div>
        <div>WED</div>
        <div>THU</div>
        <div>FRI</div>
        <div>SAT</div>
      </div>
      <div class="date">
        <div>7</div>
        <div class="current action">8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div class="action">13</div>
      </div>
      <div class="person person1">
        <div class="avatar avatar1"></div>
        <div class="what">
          <div class="title">New page for <b>Janet</b></div>
          <div class="sub">8 - 10, Her desk</div>
        </div>
      </div>
      <div class="person person2">
        <div class="avatar avatar2"></div>
        <div class="what">
          <div class="title">Catch up with <b>Tammie</b></div>
          <div class="sub">11 - 12, The roof terrace</div>
        </div>
      </div>
      <div class="person person3">
        <div class="avatar avatar3"></div>
        <div class="what">
          <div class="title">Lunch with <b>Diane</b></div>
          <div class="sub">12, The Falafel Place</div>
        </div>
      </div>
    </div>
    <div class="restart" onclick="restart()">← BACK</div>
  </div>
  <div class="content">
    <div class="button-container">
      <button class="button" onclick="materialClick(event)"><div class="circle animate"></div><span class="sign-in">Sign in</span><div class="loader"></div></button>
    </div>
    <div class="controls">
      <div class="icon">
        <div class="bar bar1"></div>
        <div class="bar bar2"></div>
      </div>
      <div class="inputs">
        <svg class="login" xmlns="http://www.w3.org/2000/svg" width="44" height="40" viewBox="0 0 44 40"><g stroke="#fff" fill="none" stroke-width="3.538" transform="translate(0 -1012.362)"><ellipse ry="8.09" rx="8.244" cy="1022.221" cx="21.555" stroke-linecap="round"/><path d="M1.858 1046.4c-.79 4.74 3.805 4.11 3.805 4.11H37.88s4.846.936 4.312-3.854c-.533-4.79-6.076-10.937-20.04-11.043-13.964-.106-19.504 6.047-20.294 10.786z"/></g></svg>
        <input
          class="input">
          <svg class="lock" xmlns="http://www.w3.org/2000/svg" width="44" height="46" viewBox="0 0 44 46"><g transform="translate(-28.15 -974.678)" stroke="#fff" fill="none" stroke-width="3.509"><rect ry="3.136" y="995.18" x="29.903" height="23.743" width="40.491" stroke-linecap="round"/><path d="M49.386 1004.406v4.788" stroke-linecap="round"/><path d="M37.073 994.83s-1.39-18.398 12.97-18.398c14.36 0 12.207 18.397 12.207 18.397"/></g></svg>
          <input
            class="input" type="password">
      </div>
    </div>
  </div>
</div>

页面的底部,需引入一个必要的JS文件,代码如下:

<script type="text/javascript" src="js/index.js"></script>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2833.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2