资源简介

(共24张PPT)
使用CSS3编写各种动态效果
R&D incubation -
Base
过渡的使用方法
CSS3 2D 转换
CSS3 动画
过渡
什么是过渡？
是我们可以在不使用 Flash 动画或JavaScript的情况下，让元素从一种样式变换为
另一种样式时为元素添加的效果，需要使用属性transition。
(注:涉及到CSS3过渡的，需要结合 :hover 伪类来实现过渡效果)
CSS3中transition过渡属性
1.transition-property：定义转换动画的CSS属性名称，宽度高度、背景颜色、内外边距
都可以。如果想要所有的属性都使用过渡，写一个 all 就可以。
2.transition-duration：过渡的持续时间,即从设置旧样式到换新样式所花费的时间，单
位为秒（s）。
CSS3中transition过渡属性
3.transition-timing-function：过渡的速度曲线,通过给过渡添加一个函数来指定
动画的快慢方式。
ease：默认值，慢速开始，然后变快，然后慢速结束
linear：速度匀速
ease-in：速度越来越快
ease-out：速度越来越慢
ease-in-out：速度先加速再减速
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）
steps（） 实现一个关键逐帧动画的功能
CSS3中transition过渡属性
4.transition-delay：过渡的延迟时间。
0：默认值，元素过渡效果立即执行
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
CSS3中transition过渡属性
5.transition 复合属性
用于在一个属性中同时设置四个过渡属性
transition:all 5s linear 2s
CSS3 2D 转换-2D位移
基本语法：transform:translate();
将元素在水平或垂直方向上移动指定距离
translate(参数1,参数2):水平方向平移和垂直方向位移
translate(参数):只能实现水平方向的移动
translateX(参数):水平方向位移
translateY(参数):垂直方向位移
CSS3 2D 转换-2D缩放
基本语法：transform:scale(参数);
对元素进行水平或垂直方向的缩放
scale(参数)：沿着x轴y轴放大缩小n倍
scale(参数1,参数2)：沿着水平放大缩小x倍，沿着垂直方向放大缩小y倍
scaleX(参数)：沿着水平方向放大缩小倍数
scaleY(参数)：沿着垂直方向放大缩小倍数
CSS3 2D 转换-2D旋转
基本语法：transform:rotate()。
对元素进行旋转,取值使用度数(deg),正值为顺时针，负值为逆时针。
rotate(参数):围绕元素的正中心进行旋转
rotateX(参数):围绕x轴进行旋转
rotateY(参数):围绕y轴进行旋转
改变元素基点：transform-origin:水平方向 垂直方向;
用来设置元素的运动的基点（参照点）,默认点是元素的中心点。其中设置的值可以是百分值,
em,px，其中水平方向也可以是字符参数值left,center,right；垂直方向和水平方向一样除了
百分值外还可以设置字符参数值top,center,bottom。
CSS3 2D 转换-2D倾斜
基本语法：transform:skew()。
使元素按一定的角度进行倾斜，可为负值。
skew(参数1，参数2)：在水平方向、垂直方向上倾斜
skew(参数)：在水平方向上倾斜，第二个参数不写默认为0
skewX(参数)：按照X轴方向倾斜
skewY(参数)：按照Y轴方向倾斜
注：如果是正值的情况下：X轴往右、Y轴往下
如果是负值的情况下：X轴往左、Y轴往上
CSS3 动画
什么是CSS3动画？
可以通过每一帧来进行动画效果的展示，并且可以完美调用每一帧，常用来实现复杂的动画
效果，可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
使用CSS3动画的步骤？
1.定义关键帧。
2.调用关键帧。
定义关键帧
方法1：使用关键字
@keyframes 关键帧名字{
from{
初始状态
}
to{
结束状态
}
}
定义关键帧
方法2：使用百分比
@keyframes 关键帧名字{
0%{
初始状态
}
100%{
结束状态
}
}
调用关键帧的animation动画属性。
1.animation-name：规定 @keyframes 动画的名称。
2.animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3.animation-timing-function：规定动画的速度曲线，ease;ease-in;ease-in-out;linear;
cubic-bezier，steps()。
4.animation-delay：规定动画何时开始。默认是 0。
5.animation-iteration-count：规定动画被播放的次数。默认是 1，可以设置为infinite。
用关键帧的animation动画属性。
6.animation 复合属性
用于在一个属性中同时设置多个动画属性
animation:关键帧名字 持续时间 速度曲线 延迟时间 规定动画播放次数等。
2023
本章結束
The Best R&D Courses
R&D incubation -
Base

展开更多......

收起↑