css3 过渡

阅读量：207 次

发布时间：2019-02-28

本文共 1611 字，大约阅读时间需要 5 分钟。

CSS 过渡效果详解

1. 语法概述

CSS 过渡效果通过 transition 属性实现，无需依赖 Flash 或 JavaScript。语法格式如下：

transition: property duration timing-function delay;

其中：

property：指定要添加过渡效果的 CSS 属性

duration：过渡效果持续时间（单位：秒或毫秒）

timing-function：定义过渡效果的时间曲线

delay：过渡效果开始的延迟时间

2. 过渡效果参数说明

以下是各参数的具体说明：

transition-property：指定要过渡的 CSS 属性

transition-duration：设置过渡效果的时长

transition-timing-function：定义过渡效果的时间曲线

transition-delay：指定过渡效果开始的延迟时间

3. 时间函数值类型

过渡效果的时间函数主要包括以下几种：

linear：匀速过渡

ease：加速度逐渐加快的过渡效果

ease-in：过渡开始时加速

ease-out：过渡结束时减速

ease-in-out：过渡开始和结束时均有加速效果

cubic-bezier(n,n,n)：自定义时间函数曲线

4. 实际应用案例

以下是一个典型的过渡效果应用示例：

div { width: 200px; height: 200px; background-color: red; transition: background-color 2s; position: absolute; left: 0; top: 0; }

可以同时设置多个属性的过渡效果：

transition: background-color 2s, left 1s 1s;

5. 组合多个过渡效果

可以通过逗号分隔指定多个 CSS 属性的过渡效果：

transition: left 1s, color 2s;

6. 分步处理过渡效果

可以通过 steps 属性将过渡效果分解为多个步骤：

transition: left 1s steps(4);

7. 浏览器兼容性考虑

由于 CSS 过渡效果在不同浏览器的支持情况不一，建议在正式应用中添加浏览器前缀：

 -moz-transition: all 5s ease 1s; -webkit-transition: all 1s ease 1s; -o-transition: all 1s ease 1s; transition: all 1s ease 1s;

8. 手风琴效果案例

以下是一个实现手风琴效果的示例代码：

Document

1

1111111111111111111111111111111111111111 1111111111111111111111111111111111111111 11111111111

2

2222222222222222222222222222222222222222 2222222222222222222222222222222222222222 2222222222222222222222222222222222222222

3

3333333333333333333333333333333333333333 3333333333333333333333333333333333333333 3333333333333333333333333333333333333333

4

4444444444444444444444444444444444444444 4444444444444444444444444444444444444444 4444444444444444444444444444444444444444

技术交流QQ群：327814892

转载地址：http://cxri.baihongyu.com/

你可能感兴趣的文章

opencv29-轮廓周围绘制矩形框和圆形框

查看>>

OpenCV3 install tutorial for Mac

opencv32-基于距离变换和分水岭的图像分割