首页 > 代码库 > 过渡效果

过渡效果

2024-08-22 11:49:39   218人阅读

CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。以下是 transition 属性的浏览器支持、语法和示例。

语法：

transition 属性主要包含四个属性值：

　　　　transition-property -- 规定应用过渡的 CSS 属性的名称；

　　　　transition-duration -- 定义过渡效果花费的时间，默认是 0；

　　　　transition-timing-function -- 规定过渡效果的时间曲线。默认是 "ease"；

　　　　transition-delay -- 规定过渡效果何时开始，默认是 0。

　　　　transition -- 简写属性，用于在一个属性中设置四个过渡属性。如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>过渡多项改变</title>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s ease, height 2s ease, -webkit-transform 2s ease; 
    transition: width 2s ease-in-out, height 2s ease-in-out, transform 2s ease-in-out;

}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg);

}

</style>
</head>
<body>

    <div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>

 

过渡效果


联系
我们