基于CSS3實現可自動輸入登錄表單動畫特效



41 163 55



特效描述:基于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

加群請備注:從官網了解到

老夫子电子