CSS3-过渡

来源：互联网发布：联合国维和知乎编辑：程序博客网时间：2024/04/27 17:13

一. CSS3过渡介绍

在 CSS3 之前，我们要向在页面上显示一个动画效果：

① 通过 Flash 动画的方式

② 通过 JavaScript 来实现

在css3有了过渡这个概念，当一个元素从一种样式变换为另一种样式时为元素添加效果。

二. 浏览器支持

在 w3shool.com.cn 上我们通过查看css3过渡介绍中就可以看到支持哪些浏览器

这里写图片描述

三. 过渡属性

属性描述 transition-property 规定应用过渡的 CSS 属性的名称。默认值 all transition-duration 定义过渡效果效果花费的时间。默认是 0。 transition-timing-function 规定过渡效果的时间曲线。默认是”ease”。 transition-delay 规定过渡效果何时开始。默认是 0。 transition 简写属性，可以同时设置上面四个属性值。

3.1 transition-property属性介绍

/*给width设置过渡效果*/div {    transition-property:width;}

值描述 none 没有属性会获得过渡效果。 all 所有属性都将获得过渡效果。默认值 property 定义哪个属性有过渡效果。例如：width, height

3.2 transition-duration属性介绍

/*设置过渡时长3s*/div {    transition-duration:3s;}

值描述 time 规定完成过渡效果需要花费的时间。默认值是 0，意味着没有效果。

3.3 transition-timing-function属性介绍

/*匀速执行过渡效果*/div {    transition-timing-function: linear;}

值描述 linear 规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1))。 ease 规定慢速开始，逐渐变快，然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,0.1))。 ease-in 规定以慢速开始的过渡效果(cubic-bezier(0.42,0,1,1))。 ease-out 固定以慢速结束的过渡效果(cubic-bezier(0,0,0.58,1))。 ease-in-out 规定以慢速开始和结束的过渡效果(cubic-bezier(0.42,0,0.58,1))。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的值。

3.4 transition-delay属性介绍

/*过渡效果在开始1秒后执行*/div {    transition-delay:1s;}

值描述 time 规定在过渡效果开始之前需要等待的时间。

3.5 transition属性介绍

/*transition: property duration timing-function delay*/div {    transition: width 1s linear 0.1s;}

值描述 transition-property 规定设置过渡效果的 CSS 属性。 transition-duration 规定过渡效果的执行时长。 transition-timing-function 规定过渡效果的速度曲线。 transition-delay 规定过渡效果何时开始。

四. 示例

鼠标放在盒子上，让盒子宽度发生变化

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>过渡动画</title>    <style>        .div {            /*盒子宽度为浏览器当前宽度的40%*/            width: 40%;            /*高度为固定200px*/            height: 200px;            /*行高为200px 设置行高，是让文字垂直居中*/            line-height: 200px;            /*文本水平居中*/            text-align: center;            /*背景颜色为红色*/            background-color: red;            /*设置过渡，过渡是在样式发生改变的时候执行*/            transition: 2s width linear  0.1s;        }        /*鼠标放在盒子上的是后，改变样式，样式此时发生了改变，执行过渡效果*/        .div:hover {            width: 20%;        }    </style><body>    <div class="div">盒子</div></body></html>

执行效果

这里写图片描述

阅读全文

0 0