html按钮过渡效果,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