css过渡transition属性

一、CSS3 过渡

（一）、CSS3过渡简介

CSS3过渡是元素从一种样式逐渐改变为另一种的效果。

实现过渡效果的两个要件：

规定把效果添加到哪个 CSS 属性上
规定效果的时长

定义动画的规则

过渡transition （作用）将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”

（二）、transition属性

语法： {transition：属性名持续时间过渡方法 }

transition-timing-function 属性取值

示例：

利用transition设置过渡的实例

<!doctype html>

<html>

<head>

<title></title>

<style>

div

{

width:100px;

height:100px;

background:blue;

transition:width 2s;

}

div:hover

{

width:600px;

height:600px;

text-align: center;

line-height:100px;

background:url(1.jpg);

background-position:top;

background-repeat: no-repeat;

}

</style>

</head>

<body>

<div>kaka</div>

</body>

</html>

从一个正方体

过渡到一个背景图片

巴特西

css过渡transition属性

从一个正方体

最新文章

热门文章