如何使用CSS3動畫切換轉換

我創建了人造開/關切換標記。是否可以將背景顏色/邊框的過渡設置爲向左/向右滑動？如何使用CSS3動畫切換轉換

目前，我只使用-webkit-transition:0.5s ease淡入切換效果，但理想情況下，我希望它看起來像它的切換左/右。

這裏的低於Fiddle：

$('.btnFauxLink').click(function() { 
 
    $('.btnFauxLink').removeClass('selected'); 
 
    $(this).toggleClass('selected'); 
 
});

.autoRefreshSetting { 
 
    border: 0; 
 
    color: #999; 
 
    font-weight: normal; 
 
    margin: 1em 0 1.2em; 
 
    padding: 0 
 
} 
 
.autoRefreshSetting .btnFauxLinkContainer { 
 
    /*background:url(img/sprite-skin-article.png) -557px -322px;*/ 
 
    background: #f8f8f8; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
    box-shadow: inset 0 1px 0 1px #D4D4D4; 
 
    -webkit-box-shadow: inset 0 1px 0 1px #D4D4D4; 
 
    -moz-box-shadow: inset 0 1px 0 1px #D4D4D4; 
 
    display: inline-block; 
 
    margin: 0 5px; 
 
    padding: 2px 0 0 
 
} 
 
.autoRefreshSetting .btnFauxLinkContainer .btnFauxLink { 
 
    border: 1px solid transparent; 
 
    color: #666; 
 
    font-size: 15px; 
 
    font-weight: normal; 
 
    margin: -2px 0 0; 
 
    padding: 3px; 
 
    text-transform: uppercase; 
 
    vertical-align: text-top 
 
} 
 
.autoRefreshSetting .btnFauxLinkContainer .selected { 
 
    background: #e7e7e7; 
 
    background: -moz-linear-gradient(top, #ffffff 0%, #fafafa 29%, #ebebeb 79%, #e7e7e7 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(29%, #fafafa), color-stop(79%, #ebebeb), color-stop(100%, #e7e7e7)); 
 
    background: -ms-linear-gradient(top, #ffffff 0%, #fafafa 29%, #ebebeb 79%, #e7e7e7 100%); 
 
    background: linear-gradient(top, #ffffff 0%, #fafafa 29%, #ebebeb 79%, #e7e7e7 100%); 
 
    border: 1px solid #d4d4d4; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
    color: #333 
 
} 
 
#autoRefreshOff { 
 
    margin-left: -4px 
 
} 
 
.btnFauxLink { 
 
    -webkit-transition: 0.5s ease 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="autoRefreshSetting"> <span class="btnFauxLinkContainer"> 
 
     <button class="btnFauxLink" type="button" id="autoRefreshOn">on</button> 
 
     <button class="btnFauxLink selected" type="button" id="autoRefreshOff">off</button> 
 
    </span> 
 
</div>

來源

2012-06-04 calebo

如果[@Oliver]（http://stackoverflow.com/users/1427287/oliver）應該是評論的答案被刪除：「我沒有直接回答你的問題，主要是因爲我不想讓你的CSS代碼可讀，但我可以告訴你，這可能是因爲我在幾個月前用純CSS3完成了這個操作，如果你有興趣的話=> [https：//secure.anonsphere。 COM /文件/ yesno.php（https://secure.anonsphere.com/files/yesno.php）」 – misterManSam

我不直接有回答你的問題，主要是因爲我不想讓你的CSS代碼的可讀性，但我可以告訴你，這是可能的，因爲我已經在幾個月前用純粹的CSS3做了這個。如果你有興趣=>https://secure.anonsphere.com/files/yesno.php。

來源

2012-06-04 01:43:13 Oliver

如何使用CSS3動畫切換轉換

回答

相關問題