transition属性怎么用

2024-01-17 14:03 小编

CSS3transition属性

作用:设置元素的过渡属性

说明:复合属性。检索或设置对象变换时的过渡。用于设置四个过渡属性:transition-property,transition-duration,transition-timing-function,transition-delay。

语法:

transition:propertydurationtiming-functiondelay;

transition-property:规定设置过渡效果的CSS属性的名称。

transition-duration:规定完成过渡效果需要多少秒或毫秒。

transition-timing-function:规定速度效果的速度曲线。

transition-delay:定义过渡效果何时开始。

CSS3transition属性的使用示例

<!DOCTYPEhtml>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:yellow;

transition:width2s;

-moz-transition:width2s;/*Firefox4*/

-webkit-transition:width2s;/*SafariandChrome*/

-o-transition:width2s;/*Opera*/

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<div></div>

<p>请把鼠标指针放到黄色的div元素上,来查看过渡效果。</p>

<p><b>注释:</b>本例在InternetExplorer中无效。</p>

</body>

</html>


image.png



Tag: 怎么
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码