css3-d ,动画,圆角

时间:2021-06-08 11:39:02

一、3D

开启元素3D
transform-style: preserve-3d;

Z轴 正数 屏幕外,反之屏幕内

近大远小
perspective: length (必须大于等于0) -- 在3D元素中设置,所有子元素统一生效。

transform: perspective(200px) -- 给3D元素的子元素单独设置景深

景深中心点:设置“观察者”位置。
perspective-origin: x y

背面是否可见

backface-visibility:

- hidden: 元素背面朝向观察者不可见。

在火狐中,必须配合
transform: translateZ(0);

二、动画

animation-name: 关键帧名, 关键帧名2
animation-duration: 动画一个播放周期持续的时间。
animation-delay: 延迟时间
animation-timing-function: 设置动画效果(三次贝塞尔曲线)

每一帧的播放顺序
animation-direction
- alternate 交替反向执行
- reverse 反向执行
- alternate-reverse 反向交替执行

控制播放次数
animation-iteration-count:
number
infinite 无限次播放

暂停
animation-play-state
running
paused 暂停(一般配合状态伪类使用)

填充:动画开始或者结束后使用第一帧或者最后一帧填充
animation-fill-mode:

backwards: 动画开始前,显示第一帧,(需要设置延迟执行时间)
forwards:动画开始后,显示最后一帧
both: 动画开始前,显示第一帧,(需要设置延迟执行时间),动画开始后,显示最后一帧

注意事项:没有绝对的第一帧和最后一帧,与动画的播放顺序有关。

简写:
animation: 无顺序要求,如果出现两个时间,最后一个代表延迟时间。
与过渡类似,也存在样式覆盖问题。

//定义动画变化的规则
@keyframes 关键帧名 {

0% ~ 100%{
css样式(有部分样式不支持)
}

第一帧:0%{}, from{}
最后一帧:100%{}, to{}

//备注:每一帧的变化自动有补间动画,无需设置过渡效果

}

三、查看某一CSS样式在各浏览器支持情况
http://www.caniuse.com

四、圆角

border-radius: 左上,右上,右下,左下
border-radius: 左上,右上,右下,左下(x轴半径) / 左上,右上,右下,左下(y轴半径)