当前位置:Gxlcms > 前端框架 > transition属性怎么用

transition属性怎么用

时间:2021-07-01 10:21:17 帮助过:133人阅读

transition属性CSS3中的是一个简写属性,用于实现过渡效果。它设置了需要设置过渡效果的CSS属性名称,完成的时间、速度曲线及开始时间。

CSS3 transition属性

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

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

语法:

transition: property duration timing-function delay;

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

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

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

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

CSS3 transition属性的使用示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>

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

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

</body>
</html>

效果图:

1.gif

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注Gxlcms相关教程栏目!!!

以上就是transition属性怎么用的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行