css3_transition: 體驗好的過渡效果。附 好看的按鈕
利用css的transition屬性詳解，上圖就是利用transition效果做的一個按鈕。
transition屬性：//舉例子:transition:all 1s ease;transition:全部 1秒 緩和
transition: property duration timing-function delay;
property —— 指定CSS屬性的name，transition效果 //舉例：all width...那種屬性 或者全部屬性 注意：一定要改變他的長寬高其他的屬性值才會觸發transition 效果
duration —— transition效果需要指定多少秒或毫秒才能完成 //舉例：1s(1秒) 持續時間
timing-function —— 指定transition效果的轉速曲線 //舉例：ease-in ease (貝塞爾曲線) 平滑效果 #查看更多詳細
delay —— 屬性指定何時將開始切換效果 //舉例：2s 延遲兩秒執行
#Style
#btn{
width: 48px;
height: 20px;
border:1px solid rgba(153, 153, 153, 0.35);
border-radius:10px;
background-color: white;
transition:all 1s ease;
position: relative;
display: inline-block;
}
#btn_circle{
display: inline-block;
height: 18px;
width: 18px;
border-radius: 9px;
border:1px solid rgba(153, 153, 153, 0.15);
transition: all 0.6s ease;
background-color: #4cb946;
position:absolute;
top: 0px;
right: 28px;
}
.btn_bg{
background-color: #4cb946!important;
}
.btn_circle_move{
right: 0!important;
background-color: white!important;
}
#Html
<div style="padding: 100px;"> <a id="btn"> <i id="btn_circle"></i> </a> </div>
#Js
var btn = document.getElementById("btn"); var btn_circle = document.getElementById("btn_circle"); btn.addEventListener("click",function () { var btnflag = btn.classList.contains('btn_bg'); if(!btnflag){ btn.classList.add("btn_bg"); btn_circle.classList.add("btn_circle_move") }else{ btn.classList.remove("btn_bg"); btn_circle.classList.remove("btn_circle_move") }; return false; },false)
浙公網安備 33010602011771號