CSS3過渡如何，爲無線電選擇按鈕

我有一個無線電選擇按鈕，我希望過渡與CSS3的幻燈片效果，而不是隻有淡入/淡出效果，我目前與CSS3。CSS3過渡如何，爲無線電選擇按鈕

純粹的CSS3可以做到嗎？我不想使用任何jquery，因爲我希望它儘可能簡單和乾淨。

謝謝。

body { 
 
    font: 16px Arial, sans-serif; 
 
    background-color: #e0e0e0; 
 
} 
 
/* Hiding Radio */ 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 
/* switch-bar */ 
 

 
.switch-canvas { 
 
    width: 200px; 
 
    margin: 50px auto; 
 
    height: 40px; 
 
    padding: 5px; 
 
    background-color: #000; 
 
    font-size: 0; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
label { 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    width: 50%; 
 
    height: 40px; 
 
    color: #222; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
input[type="radio"]:checked + label { 
 
    background-color: #fff; 
 
    color: green; 
 
    border-radius: 2px; 
 
}

<div class="switch-canvas"> 
 
    <input type="radio" id="female" name="sex" checked="" /> 
 
    <label for="female">Female</label> 
 
    <input type="radio" id="male" name="sex" /> 
 
    <label for="male">Male</label> 
 
</div>

來源

2016-05-18 Krys

在接下來的時間，請提前.. http://cssdeck.com谷歌/實驗室/更好-CSS-肘節開關。 –

@Mosh Feu我不想要複選框Mosh，我想單選按鈕，它更符合邏輯，你可以選擇男性或女性。我在 – Krys

之前看過那個頁面在這個演示中你也有單選按鈕..注意.. –

我的單選按鈕後添加跨度，以便他將是白色圓角正方形誰標記出所選擇的選項。

body { 
 
    font: 16px Arial, sans-serif; 
 
    background-color: #e0e0e0; 
 
} 
 
/* Hiding Radio */ 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 
/* switch-bar */ 
 

 
.switch-canvas { 
 
    width: 200px; 
 
    margin: 50px auto; 
 
    height: 40px; 
 
    padding: 5px; 
 
    background-color: #000; 
 
    /*font-size: 0;*/ 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    position:relative; 
 
} 
 
label { 
 
    position: relative; 
 
    z-index:1; 
 
    float:left; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    width: 50%; 
 
    height: 40px; 
 
    color: #222; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
/*label { 
 
display: inline-block; 
 
font-size: 16px; 
 
font-weight: bold; 
 
width: 50%; 
 
height: 40px; 
 
color: #222; 
 
line-height: 40px; 
 
text-align: center; 
 
cursor: pointer; 
 
transition: all 0.3s; 
 
-webkit-transition: all 0.3s; 
 
-webkit-border-radius: 5px; 
 
-moz-border-radius: 5px; 
 
border-radius: 5px; 
 
}*/ 
 
input[type="radio"]:checked + label { 
 
    /*background-color: #fff;*/ 
 
    color: green; 
 
    /*border-radius: 2px;*/ 
 
} 
 

 
span { 
 
    position:absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    width: 50%; 
 
    height: 40px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    background-color: #fff; 
 
    transform:translate(0); 
 
} 
 

 
#male:checked ~ span { 
 
    transform:translateX(100%); 
 
    left:-5px; 
 
}

<div class="switch-canvas"> 
 
    <input type="radio" id="female" name="sex" checked="" /> 
 
    <label for="female">Female</label> 
 
    <input type="radio" id="male" name="sex" /> 
 
    <label for="male">Male</label> 
 
    <span></span> 
 
</div>

http://jsbin.com/tazahek/edit?html,css

它不工作在IE8及以上（顯然）

來源

2016-05-18 13:24:45

CSS3過渡如何，爲無線電選擇按鈕

回答

相關問題