Css3动画 Qian锋逆战班

首先在css3出现前，动画都是由js来完成的，虽然能够实在动画，但是性能上存在一些问题，css3的出现使动画变得更容易，而且性能也会更好
Transform
我们可以理解为元素的几何变形，它是由规律的，这种变形并不会产生送花效果仅仅是原有形状的改变。
transform：设置元素形状改变
rotate：表示旋转
transform: rotate();
transform: rotateX();
transform: rotateY();
transform: rotateZ(); 3d

     transform: rotate3D(x,y,z,a);      3d0 ：不旋转；1：旋转    x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。scale：缩放transform: scale3d()![在这里插入图片描述](https://img-blog.csdnimg.cn/20200308222203808.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGluZ2ppeGlhbmc=,size_16,color_FFFFFF,t_70)transform: scale3d(x , y , z);  3dtransform: scale(x,y)transform: scaleX();transform: scaleY();transform: scaleZ();  3d

skew：扭曲
translate：移动
移动分三种情况：
translate([, ])、translateX()和translateY()；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位：px、rem

transform-style：设置3D空间的
属性值:
Flat：处在2D空间里（默认值）
Preserve-3D 处在3D空间里
perspective:200px; 景深：
离屏幕多远的距离去观察元素，值越大幅度越小。近大远小属性值建议设置在 900——1200；
perspective:200px; （父元素）
transform:perspective(1200px) （在子元素中使用）
两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
perspective-origin
原点设置，基点位置，观察3d元素的（位置）角度
perspective-origin：值1 值2；(父元素)
px % left top right bottom
transform-origin : x y z ；属性允许改变被转换元素的位置，设置旋转元素的基点位置； z 不能设置%；
transform-origin ： 50% 50% 0；（默认值）
animation-timing-function

检索或设置对象动画的过渡类型
属性值：
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 默认值；
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:马上跳到动画每一结束桢的状态 (实现逐帧动画效果)
贝塞尔曲线
transition-delay：
用来设置过渡动画执行的时间，单位s或ms默认值为0
animation-delay
设置动画开始的时间，单位s或ms默认值为0
说明：animation-delay:0.5s; 动画开始前延迟的时间为0.5s)
animation-iteration-count
设置对象动画的循环次数
默认值为1
属性值：
animation-iteration-count: infinite | number;
infinite：无限循环
number: 循环的次数 2 3

Css3动画 Qian锋逆战班相关推荐

千锋逆战班学习第二十五天
千锋逆战班学习第25天努力或许没有收获,但不努力一定没收获,加油. 今天我学了Java课程的集合. 中国加油!!!武汉加油!!!千锋加油!!!我自己加油!!! 4.有如下代码: public cla ...
千锋逆战班学习第二十三天集合练习（一）
千锋逆战班在千锋"逆战"学习第23天, 每个人生阶段都需要努力去扮好自己的角色,越努力越轻松,越坚强越幸运! 加油! 2(List)有如下代码 import java.util. ...
千锋逆战班学习日志Day47
千锋逆战班学习第47天表单标签 CSS介绍二.CSS和HTML结合 2.1CSS和HTML结合之内联结合 2.2CSS与HTML结合之内部部结合 2.3CSS和HTML结合之外部结合三.访问路径 ...
千锋逆战班学习第二十四天
千锋逆战班在千锋"逆战"学习第24天, 每个人生阶段都需要努力去扮好自己的角色,越努力越轻松,越坚强越幸运! 加油! 1(Object类)有下面代码 interface IA{v ...
1903java全套_#千锋逆战班，java1903#
在千锋"逆战"学习第17天 SpringMVC运行流程: SpringMVC基础配置: 1.web.xml: dispatcherServlet / 2.controller层方法 ...
#千锋逆战班，拼搏永向前#
在千峰"逆战"学习第十一天如果有天我们湮没在人潮之中,庸碌一生,那是因为我们没有努力要活得丰盛今天我学习了一下内容: 1.什么是JSP 2.JSP的语法 3.JSP的指令 4. ...
千锋逆战班，css注册案例
千锋学习的第四十八天, 不积跬步无以至千里,不积小流无以成江河: 注册案例代码: <!DOCTYPE html> <html><head><meta char ...
python体验课直播教程_2020千锋逆战班——Python直播体验课
第1节 - day1:01 图片下载点击播放第2节 - day1:02 获取网页数据点击播放第3节 - day1:03 数据接口点击播放第4节 - day1:04 图片批量下载点击播放 ...
千锋逆战班，网络编程
在千锋学习的第33天努力努力在努力,坚持坚持再坚持!!!加油今天我学习了网络的划分层次,以及其中的TCP和IP协议,学习了IntAddress类和ServerScoket和Scoket 1.填空: ...

Css3动画 Qian锋逆战班

Css3动画 Qian锋逆战班相关推荐

最新文章

热门文章