啥也不说了,直接上代码:
transform用来设置变换、transition用来设置过渡,之前一直记得比较模糊,今天分清了,以前看的时候可能是混起来看的,今天是分开看,所以觉得很好理解。贝塞尔曲线表示时间和进度的关系,可以通过贝塞尔工具 预览效果。
变形是静态的是对元素外观的修改,过渡是动态效果,是当元素(指定或任意)样式发生变化是产生的过渡效果。
#a{ width:100px; height:100px; /*background:#f00;*/ transform: rotate(40deg) /*旋转,正数顺时针,负数逆时针*/ translate(-10px,-30px)/*位移*/ scale(2,1) /*缩放*/ skew(30deg,-50deg)/*翻转*/; /*transform:*/ transform-style:preserve-3d ; transform-origin:10% 20% /*转换原点,如果是3d的三个值*/; transition:all 2s ease 1s /*过渡效果,property duration timing-function delay*/; transition-timing-function:ease; /*单独设置过渡时间效果*/ transition-timing-function: cubic-bezier(0,1,0,1); }
了解 工作生活心情记忆 的更多信息
Subscribe to get the latest posts sent to your email.