基于CSS3實現水平控制按鈕開關特效



39 154 52



特效描述:基于CSS3實現 水平控制 按鈕開關,基于CSS3實現水平控制按鈕開關特效

代碼結構

1. 引入CSS

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

2. HTML代碼

  <div class="main">
  <h1>Pure CSS Segmented Controls</h1>
  <nav class="segmented-control segmented-control--turquoise" style="width: 600px;">
    <input type="radio" name="sc-0" id="sc-0-1"  />
    <input type="radio" name="sc-0" id="sc-0-2" checked="checked" />
    <input type="radio" name="sc-0" id="sc-0-3" />
    <input type="radio" name="sc-0" id="sc-0-4" />
    <label for="sc-0-1" data-value="Lorem Ipsum">Lorem Ipsum</label>
    <label for="sc-0-2" data-value="Cras justo">Cras justo</label>
    <label for="sc-0-3" data-value="Tellus Etiam">Tellus Etiam</label>
    <label for="sc-0-4" data-value="Lorem Pellentesque">Lorem Pellentesque</label>
  </nav>
  <br />
  <nav class="segmented-control" style="width: 600px;">
    <input type="radio" name="sc-2" id="sc-2-1"  />
    <input type="radio" name="sc-2" id="sc-2-2" checked="checked" />
    <label for="sc-2-1" data-value="Cras Pharetra">Cras Pharetra</label>
    <label for="sc-2-2" data-value="Ultricies Justo">Ultricies Justo</label>
  </nav>
  <br />
  <nav class="segmented-control segmented-control--red" style="width: 600px;">
    <input type="radio" name="sc-1" id="sc-1-1"  />
    <input type="radio" name="sc-1" id="sc-1-2" checked="checked" />
    <input type="radio" name="sc-1" id="sc-1-3" />
    <label for="sc-1-1" data-value="Fringilla Justo">Fringilla Justo</label>
    <label for="sc-1-2" data-value="Ipsum Parturient">Ipsum Parturient</label>
    <label for="sc-1-3" data-value="Porta">Porta</label>
  </nav>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 滑動選項卡 滑動切換 h5按鈕動畫 html5按鈕動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表