一、transition过渡
transition-property: 要运动的样式(all || [attr] || none)
transition-duration: 运动时间
transition-delay:延迟时间
transition-timing-function: 运动形式
- ease: 逐渐变慢(默认值) - linear: 匀速 - ease-in: 加速 - ease-out: 减速 - ease-in-out: 先加速后减速 - cubic-bezier: 贝塞尔曲线(x1, y1, x2, y2 ) 【http://matthewlein.com/ceaser/】 transition: all 2s; // 所有属性,过渡时间2s transition: width 2s, height 3s;
http://matthewlein.com/ceaser/
二、过渡事件
Webkit
// 添加事件 obj.addEventListener('webkitTransitionEnd',function(){},false); // 删除事件 obj.removeEventListener('webkitTransitionEnd', fn,false);
firefox
// 添加事件 obj.addEventListener('transitionend',function(){},false); // 删除事件 obj.removeEventListener('transitionend', fn,false);
// 添加事件
function addEvent(obj, fn){
obj.addEventListener('webkitTransitionEnd', fn,false);
obj.addEventListener('transitionend', fn,false);
}
// 删除事件
function removeEvent(obj, fn){
obj.removeEventListener('webkitTransitionEnd', fn,false);
obj.removeEventListener('transitionend', fn,false);
}
三、transform形变(2d)
rotate() 旋转函数 取值度数
- deg 度数 - transform-origin 旋转的基点 // 以矩形右上角为基点旋转 transform-origin: right top; // 以矩形左上角为基点旋转 transform-origin: 0 0; // 旋转30度 transform: rotate(30deg);
skew() 倾斜函数 取值度数
- skewX() - skewY() // x轴和y轴方向,斜切30度 transform: skewX(30deg) skewY(30deg);
skewX
skewY
scale() 缩放函数 取值 正数、负数和小数
- scaleX() - scaleY() // 矩形缩小为0.9 transform: scale(0.9);
translate() 位移函数
- translateX() - translateY() // 往右平移30px transform: translateX(30px)
案例: 钟表
案例: 扇形菜单
作者:EndEvent
链接:https://www.jianshu.com/p/242283b8f510
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦