基于CSS3实现可自动输入登录表单动画特效



37 147 50



特效描述:基于CSS3实现 可自动输入 登录表单动画,基于CSS3实现可自动输入登录表单动画特效

代码结构

1. 引入CSS

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

2. 引入JS

<script src='js/jquery.js'></script>
<script src='js/fyll.js'></script>
<script src="js/index.js"></script>

3. HTML代码

<div id="window" style="display:none;">
  <div class="page page-front">
    <div class="page-content">
      <div class="input-row">
        <label class="label fadeIn">Username</label>
        <input id="username" type="text" data-fyll="pineapple" class="input fadeIn delay1"/>
      </div>
      <div class="input-row">
        <label class="label fadeIn delay2">Password</label>
        <input id="password" type="password" data-fyll="hackmeplease" class="input fadeIn delay3"/>
      </div>
      <div class="input-row perspective">
        <button id="submit" class="button load-btn fadeIn delay4"><span class="default"><i class="ion-arrow-right-b"></i>Login</span>
          <div class="load-state">
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
          </div>
        </button>
      </div>
    </div>
  </div>
  <div class="page page-back">
    <div class="page-content"><img src="avatar.jpg" class="avatar"/>
      <p class="welcome">Welcome back, Dog!</p>
      <div class="perspective">
        <button class="button inline trigger-anim-replay"><i class="ion-refresh"></i>Replay animation</button>
      </div>
    </div>
  </div>
</div>
<div class="browser-warning hidden">Glitchy or weird animation? Let it play through once, then press Replay.</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 旋转翻转 旋转 翻转 延迟加载 无限加载 延迟 加载 切换按钮 表单 表单美化 表单插件 表单美化插件 图片翻转 图片旋转 加载动画 选项卡自动切换 登录框 表单提交

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到