久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

搜索
分享

純css3滑動按鈕動畫效果

 絕筆斕姍 2015-06-14

純css3滑動按鈕動畫效果

下載地址：http://www./css3/css3donghua/20141122558.html


當前位置：主頁 > CSS3庫 > CSS3動畫 > 純css3滑動按鈕動畫效果
純css3滑動按鈕動畫效果
分享：

    插件介紹

    這是一款使用純css3制作的類似ios和android滑動按鈕的動畫效果,。該css3滑動按鈕效果小巧玲瓏,，效果出眾，值得你擁有,。

    瀏覽器兼容性

    瀏覽器兼容性
    時間：2014-11-22
簡要教程

android系統(tǒng)的滑動按鈕相信大家都使用過,。這款插件就是使用純css3制作出類似android系統(tǒng)的滑動按鈕效果,。

HTML

html代碼十分簡單。使用一個大的div作為包裹容器,，給它一個class toggle用于控制樣式,，一個Id switch 用于使用js來控制動畫。

<div class='toggle' id='switch'>
  <div class='toggle-text-off'>OFF</div>
  <div class='glow-comp'></div>
  <div class='toggle-button'></div>
  <div class='toggle-text-on'>ON</div>
</div>

CSS

html{height: 95%;}
body{height: 95%;background-color: #141219;}
#switch{
    top: 25%;
    left: 50%;
    width: 75px;
    height: 40px;
}
.toggle{
    position: absolute;
    border: 2px solid #444249;
    border-radius: 20px;
    -webkit-transition: border-color .6s  ease-out;
    transition: border-color .6s  ease-out;
    box-sizing: border-box;
}
.toggle.toggle-on{
    border-color: rgba(137, 194, 217, .4);
    -webkit-transition: all .5s .15s ease-out;
    transition: all .5s .15s ease-out;
}
.toggle-button{
    position: absolute;
    top: 4px;
    width: 28px;
    bottom: 4px;
    right: 39px;
    background-color: #444249;
    border-radius: 19px;
    cursor: pointer;
    -webkit-transition: all .3s .1s, width .1s, top .1s, bottom .1s;
    transition: all .3s .1s, width .1s, top .1s, bottom .1s;
}
.toggle-on .toggle-button{
    top: 3px;
    width: 65px;
    bottom: 3px;
    right: 3px;
    border-radius: 23px;
    background-color: #89c2da;
    box-shadow: 0 0 16px #4b7a8d;
    -webkit-transition: all .2s .1s, right .1s;
    transition: all .2s .1s, right .1s;
}
.toggle-text-on{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 36px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    font-weight: normal;
    cursor: pointer;
    -webkit-user-select: none; /* Chrome/Safari */   
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    color: rgba(0,0,0,0);
}
.toggle-on .toggle-text-on{
    color: #3b6a7d;
    -webkit-transition: color .3s .15s ;
    transition: color .3s .15s ;
}
.toggle-text-off{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    line-height: 36px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: bold;
    -webkit-user-select: none; /* Chrome/Safari */       
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    cursor: pointer;
    color: #444249;
}
.toggle-on .toggle-text-off{color: rgba(0,0,0,0);}
/* used for streak effect */
.glow-comp{
    position: absolute;
    opacity: 0;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    border-radius: 6px;
    background-color: rgba(75, 122, 141, .1);
    box-shadow: 0 0 12px rgba(75, 122, 141, .2);
    -webkit-transition: opacity 4.5s 1s;
    transition: opacity 4.5s 1s;
}
.toggle-on .glow-comp{
    opacity: 1;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

使用jQuery來切換class控制滑動動畫效果,。

$('.toggle').click(function(e){
  e.preventDefault(); // The flicker is a codepen thing
  $(this).toggleClass('toggle-on');
});

以上就是這個滑動按鈕效果的所有代碼,。

    本站是提供個人知識管理的網(wǎng)絡存儲空間，所有內容均由用戶發(fā)布,，不代表本站觀點,。請注意甄別內容中的聯(lián)系方式、誘導購買等信息,，謹防詐騙,。如發(fā)現(xiàn)有害或侵權內容，請點擊一鍵舉報,。
    轉藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多