css3_transition: 体验好的过渡效果。附 好看的按钮
2024-04-07 13:42:48
利用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)
最新文章
- asp.netDataTable导出excel方法(2)
- linux内核学习之四 系统调用
- Tomcat回收连接
- CodeForces - 424B (贪心算法)
- ie兼容整理
- sass小总结
- React状态的含义和用法
- CString的部分实现剖析
- js函数中的BOM和DOM
- [HNOI2015]实验比较
- CAPTCHA---验证码 ---Security code
- 线性代数导论 | Linear Algebra 课程
- node 常用模块及方法fs,url,http,path
- 查看python脚本的运行pid,让python脚本后台运行
- SpringBoot项目获取ApplicationContext来GetBean的方法
- masonry 基本用法
- 编写自定义django-admin命令
- Jenkins和gitlab集成自动构建
- cocos2d-x调用scheduleUpdate()不执行update()方法的解决办法
- python开发_getpass_获取登录名