Rumah > Artikel > hujung hadapan web > transition属性怎么用

transition属性怎么用

青灯夜游asal: 2019-01-30 14:44:497244semak imbas

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

transition属性怎么用

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>

效果图：

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

Atas ialah kandungan terperinci transition属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php css css3 Property function 对象 transition

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：word-wrap属性怎么用Artikel seterusnya：resize属性怎么用

Artikel berkaitan

Lihat lagi