利用CSS3實現點擊動畫展開復選框特效



13 51 18



特效描述:利用CSS3實現 點擊動畫 展開復選框 特效,利用CSS3實現點擊動畫展開復選框特效

代碼結構

1. HTML代碼

<div class='viewport'>
  <div class='todos'>
    <h1 class='title'>
      Grocery list
    </h1>
    <i class='divider'></i>
    <input class='toggle' id='toggle' type='checkbox'>
    <label class='btn-toggle' for='toggle'>
      Toggle
    </label>
    <input class='input' id='ch-0' name='ch-0' type='checkbox'>
    <label class='item' for='ch-0' style='--item: 0'>
      <div class='item__content'>
        <div class='pseudo-check'>
          <div class='checkmark'>
            <div class='goo'></div>
          </div>
        </div>
        <span class='item__text'>
          Macarons
        </span>
      </div>
    </label>
    <div class='progress'></div>
    <input checked='' class='input' id='ch-1' name='ch-1' type='checkbox'>
    <label class='item' for='ch-1' style='--item: 1'>
      <div class='item__content'>
        <div class='pseudo-check'>
          <div class='checkmark'>
            <div class='goo'></div>
          </div>
        </div>
        <span class='item__text'>
          Gummy Bears, Gummy Bears, Gummy Bears, Gummy Bears, Gummy Bears
        </span>
      </div>
    </label>
    <div class='progress'></div>
    <input class='input' id='ch-2' name='ch-2' type='checkbox'>
    <label class='item' for='ch-2' style='--item: 2'>
      <div class='item__content'>
        <div class='pseudo-check'>
          <div class='checkmark'>
            <div class='goo'></div>
          </div>
        </div>
        <span class='item__text'>
          Oreos
        </span>
      </div>
    </label>
    <div class='progress'></div>
    <input class='input' id='ch-3' name='ch-3' type='checkbox'>
    <label class='item' for='ch-3' style='--item: 3'>
      <div class='item__content'>
        <div class='pseudo-check'>
          <div class='checkmark'>
            <div class='goo'></div>
          </div>
        </div>
        <span class='item__text'>
          Laffy Taffy
        </span>
      </div>
    </label>
    <div class='progress'></div>
    <input class='input' id='ch-4' name='ch-4' type='checkbox'>
    <label class='item' for='ch-4' style='--item: 4'>
      <div class='item__content'>
        <div class='pseudo-check'>
          <div class='checkmark'>
            <div class='goo'></div>
          </div>
        </div>
        <span class='item__text'>
          Skittles
        </span>
      </div>
    </label>
    <div class='progress'></div>
    <div class='end'>
      <div class='goo'></div>
    </div>
  </div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 切換按鈕 表單 表單美化 表單插件 表單美化插件 h5按鈕動畫 html5按鈕動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子 制作文档可以赚钱吗 上海快三遗漏号 吉林快三网上 nba2k17传奇经理赚钱 扑克脸英文 七乐彩推荐号码预测 2019双色球开奖号码 河北时时彩开奖号码 欢乐生肖开奖视频直播 重庆时时彩软件手机版计划 股票配资论坛找象泰配资券商背景@G 凤凰彩票平台代理返点 江苏体彩e球彩下载 西安中彩票 网上的电脑赚钱平台是真的吗 重庆时时彩