CSS 笔记（十一）：属性 —— 特效

CSS 笔记（十一）：属性 —— 特效

过渡

基本使用

1. 某个属性发生变化

2. 哪个属性执行过渡效果

属性

transition-property: ..., ..., ...;

哪个属性执行过渡效果

值

• 标签名称

3. 过渡效果的持续时长

属性

transition-duration: ..., ..., ...;

过渡效果的持续时长

值

• (…)s

其它属性

属性

transition-timing-function: ..., ..., ...;

过渡效果的运动速度

值

• linear
• ease
• ease-in
• ease-out
• ease-in-out

属性

transition-delay: ..., ..., ...;

延迟执行过渡效果的时间

值

• (…)s

简写

transition: property duration timing-function delay, ... ... ... ...;

可以省略运动速度和延迟时间，如果同时设置所有过渡属性，可以使用 all

---

• 当多个属性同时执行过渡效果时，使用逗号隔开即可

1. 基本布局
2. 修改属性
3. 添加过渡

---

2D 转换

旋转

transform: rotate(...deg);

旋转元素，在 2D 转换模块，旋转会修改元素的坐标系方向，默认情况下，中心点为元素的中心，旋转轴为 Z 轴

平移

transform: translate(...px, ...px);

平移元素，第一个参数为水平方向，第二个参数为垂直方向

缩放

transform: scale(..., ...);

缩放元素，第一个参数为水平方向，第二个参数为垂直方向，如果水平和垂直方向缩放比相同，可以只写一个参数

简写

transform: rotate(...deg) translate(...px, ...px) scale(..., ...);

中心点

transform-origin: ... ... ...;

标签旋转的中心点，第一个参数为水平方向，第二个参数为垂直方向，第三个参数为前后方向，取值可以为像素、百分比等

旋转轴向

可以通过在 rotate 函数之后添加 Z（默认）、X、Y 来指定旋转轴向

transform: rotateZ(...deg);

transform: rotateX(...deg);

transform: rotateY(...deg);

平移轴向

可以通过在 translate 函数之后添加 Z、X、Y 来指定旋转轴向

transform: translateZ(...deg);

transform: translateX(...deg);

transform: translateY(...deg);

透视

perspective: ...px

近大远小，参数表示观察元素的距离，取值越小，表示距离越近，透视效果越明显，此标签必须设置为透视元素的祖先元素

阴影

box-shadow: horizontal_offset vertical_offset blur_deg extend color direction;

• 水平偏移与垂直偏移表示阴影的偏移方向，可以为负值，模糊度为阴影的模糊程度，扩展、颜色与方向可以省略，默认情况下，颜色与标签内容颜色相同，方向在边框外围

text-shadow: horizontal_offset vertical_offset blur_deg color;

• 水平偏移与垂直偏移表示阴影的偏移方向，可以为负值，模糊度为阴影的模糊程度，颜色可以省略，默认情况下，颜色与标签内容颜色相同

动画

动画与过渡的不同点在于，动画不需要人为触发，可以自动执行

基本使用

1. 执行哪个动画

属性

animation-name: ...;

值

• 任意名称（自定义）

2. 创建动画

@keyframes 动画名称 {
    from {
        属性: 值;
        ...
        属性: 值;
    }
    to {
        属性: 值;
        ...
        属性: 值;
    }
}

@keyframes 动画名称 {
    0% {
        属性: 值;
        ...
        属性: 值;
    }
    ...
    100% {
        属性: 值;
        ...
        属性: 值;
    }
}

3. 动画的持续时长

属性

animation-duration: ...;

值

• (…)s

其它属性

属性

animation-timing-function: ...;

动画的执行速度

值

• linear
• ease
• ease-in
• ease-out
• ease-in-out

属性

animation-delay: ...;

延迟执行动画的时间

值

• (…)s

属性

animation-iteration-count: ...;

动画的执行次数

值

• (…)
• infinite

属性

animation-direction: ...;

动画的往返执行

值

• normal（默认）
• alternate

属性

animation-paly-state: ...;

动画的执行/暂停

值

• running（默认值）
• paused

属性

animation-fill-mode: ...;

动画的状态（等待、结束）样式

值

• none（默认）
• forwards
• backwards
• both

简写

animation: animation_name duration timing-function delay iteration-count direction;

---

1. 动画中如果存在与默认样式相同的属性，那么默认样式会被层叠
2. 在动画中，取值固定不变的属性在前，不固定的在后

---

3D 转换

默认情况下所有的元素均以 2D 显示

基本使用

属性

transform-style: ...;

设置此属性的元素的子元素将以 3D 形式显示

值

• flat（默认）
• perserve-3d