css动画样式

100人浏览 2024-09-24 08:04:11

一，css3新增了动画效果，目前

使用transform属性实现元素在空间内的移动，旋转缩放等效果，

1，空间：是从坐标轴定义的，x，y，和z三条坐标构成了一个立体空间，z轴位置与视线相同空间转换也叫3d转换，属性名唤transform

二，空间位移

语法：

transform:translate3d(x,y,z);

transform:translatex() transform:translatey() transform:translatez()

取值（正负均可）像素单位数值百分比

三，透视

简单来说就是给大盒子加上一个属性，此属性名为 perspective:1000px一般在800-1200之间

四，

空间旋转 rotate

transform：rotatex（） transform：rotatey（） transform：rotatez（）

五，立体呈现

实现方法：添加 transform-style：preserve-3d 让子元素处于真正的3d空间

空间缩放：tansform：scale（）

定义动画，@keyframes 动画名称{

0%{}

10%{}

15%{}

100%{}

}

2，使用动画 animation：动画名称动画花费时长速度曲线延迟时间重复次数动画方向执行完毕状态。

infini为无限循环 alternate为反方向：hover{
animation-play-state:paused}鼠标放上去暂停

实现3d反转的导航栏大致思路

相关推荐