您的位置：首页 > Web前端 > CSS

css3 transition平滑过渡

2016-04-08 14:32 417 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:red;
width:400px;
height:200px;
/* -property定义过渡属性 */
-webkit-transition-property:background-color;
/* -duration定义过渡时间 */
-webkit-transition-duration:2s;
/* -delay 定义延迟时间 */
/* -webkit-transition-delay:1s; */
/* -timing-function定义过渡效果
ease缓解效果
linear 线性效果
ease-in渐显效果
ease-out渐隐效果
ease-in-out渐显渐隐效果
cubic-bezier特殊的立方贝塞尔曲线效果
*/
-webkit-transition-timing-function: linear;
　　　　　　　　　　　　　　/*设计倒影效果*/
　　　　　　　　　　　　　　-webkit-box-reflect:below 2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.45,transparent),to(rgba(255,255,255,0.25)));
}

div:hover{
background:blue;

}
</style>
</head>
<body>
<div></div>
</body>
</html>

　鼠标放上去背景颜色变换

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航