Rumah > Artikel > hujung hadapan web > css transition属性怎么用
css transition属性怎么用
- 藏色散人asal
- 2019-05-29 15:23:072566semak imbas
css transition属性是一个简写属性，其语法是transition: property duration timing-function delay，用于设置四个过渡属性。
css transition属性怎么用？
作用：
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 定义过渡效果何时开始。
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
css transition属性使用示例
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
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>效果输出：
Atas ialah kandungan terperinci css transition属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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：css perspective-origin属性怎么用Artikel seterusnya：css quotes属性怎么用