资源
过渡 transition
- 过渡:transition,指定一个属性发生变化时的切换方式,可以创建一个动画效果,提升体验
- transition-property:指定要执行过渡的属性,多个属性逗号隔开。大部分属性都要过渡,则使用all,大部分属性都支持过渡,需要有具体数值的,而且必须是从一个有效值向另一个有效数值进行过渡, auto不是有效数值。
例:transition-property:width,height
- transition-duration:指定过渡效果的持续时间,单位是 s 和 ms,可以给property中的属性分别指定时间。
例:transition-duration:2s,100ms
- transtion-timing-function,指定过渡的时序函数,即过渡数值的变化方式,可选值:
- ease,默认值,慢速开始,先加速,后减速
- linear,匀速运动
- ease-in,加速运动
- ease-out,减速运动
- ease-in-out,先加速,后减速,与ease稍有不同
- cubic-bezier(.25,.1,.25,1),贝塞尔曲线,来指定变化曲线,括号内容由工具生成(https://cubic-bezier.com),数字分别是官网图上两个点的坐标
- steps(),分部执行过渡效果,例:
step(2,start/end)
,start,end表示在时间开始或者结束时开始过渡
- transition-delay,过渡的延迟,等待相应时间后再执行过渡,例:
transiton:2s
- 简写属性,transition,同时执行过渡相关的属性,其中延迟在持续时间后面,其他无顺序要求,语法:transition:变化的内容 变化的持续时间 …
- 作用,可以完成雪碧图的移动,本节对应练习项目中的米兔动画
动画 animation
- 动画和过渡类似,实现动态效果;过渡是某些属性发生变化时触发,动画是自动触发
- 设置动画效果必须先要设置关键帧,关键帧可以设置关键时间的帧的样式
- 关键帧语法:@keyframes identifier{ from{} to{} },identifier自己起一个名字,相当于类名,给元素加动画时会用到
- 例子:
@keyframes test {
/* from表示动画开始位置,也可以使用0% */
from{
margin-left: 0;
}
/* 指定25%的动画效果*/
25%,50%{
margin-right: 700px;
animation-timing-function: ease-in;
}
/* to表示动画开始位置,也可以使用100% */
to{
margin-right: 700px;
}
}
- 然后使用动画的属性设置动画样式,包括以下的:
- animation-name : identifier;指定对当前元素生效的关键帧名字
- animation-duration: 2s 动画的执行时间
- animation-timing-function:linear
- animation-delay:2s 动画的延迟时间
- animation-iteration-count:动画执行的次数。可选值:次数:整数;infinite:表示无限
- animation-direction:指定动画运行方向,可选值:
- normal 默认值 从from向to运行,每次都这样
- reverse 从 to 往 from
- alternate 从from向to运行 重复时反向
- alternate-reverse 从nto向from运行 重复时反向
- animation-paly-state:设置动画的执行状态。可选值:running 默认值,动画执行;pasued 动画暂停。
- animation-fill-mode:指定动画的填充模式,可选值:
- none 默认值,执行完毕回到原来位置
- forwards 动画执行完毕元素会停在动画结束的位置
- backwards 动画延时等待时,元素就会处开始位置
- both,兼有forwards和backwards
- 最后还有简写属性animation,可以设置上述的所有属性
- 可以用来做一些动画效果,更美观,本节对应练习项目中的 米兔动画 和 钟表 的制作
变形 transform
- 变形是指通过CSS来改变元素的形状或位置,transform 用来设置元素的变形效果
- 变形不会影响到页面布局
- 所有改变位置时,transform比position更好用
- 平移:属性值如下
- translateX() 沿着x轴方向平移
- translateY() 沿着y轴方向平移
- translateZ() 沿着z轴方向平移
例:transform:translateX(100px)
- transform: translateX(50%),百分比相对自身计算,这就引申出一个居中方式
- 以前的居中方式,
dianplay:table;vertical-align:center;text-align:center;
- 以前的适用于长宽已知:
top:0;bottom:0;left:0;right:0;margin:auto
- 新的适用长宽不知的:left:50%; top:50%; transform:translateX(50%) translateY(50%)
- translateZ(100px),改变Z轴位置,近大远小,但浏览器默认不支持透视所以看不出来,看到效果需要设置默认情况下网页的视距,如将当前视距设为800px可以这样写,
html{perspective(800px)}
,然后translateZ就起作用了 - 旋转:使元素沿着 x y z选转指定的角度
- 属性值:rotateX() rotateY() rotateZ()
- 例:
transform:rotateY(180deg) translateZ(100px)
,Z,Y的顺序不同则变化不一样,设置了视距后效果更佳 - 可以使用rotateZ(180deg)来水平反转图片,使用backface-visibility:hidden/visibile来设置图片背部是否可见
- 缩放:scale,对元素进行缩放,本质是拉长轴
- 属性值:scaleX() 水平方向缩放;scaleY() 垂直方向缩放 ;scaleZ() z方向缩放,使用很少 ;scale() 双方向缩放
- 例:
transform:scaleX(2);
X轴放大两倍,可以用于图片放大效果
- 变形原点 :transform-origin,可以改变缩放原点
- 默认center,
- 例:transform-origin:20px 20px
- 联合动画和变形,可以做出不断旋转的图片正方体,本节对应的项目是 图片立方体