transition是CSS样式的一个属性，无聊之余看了一下，分享一下。
transition的语法：
transition: property duration timing-function delay;主要属性transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。 这些都看起来比较枯燥，我们就看看具体的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>transition 练习</title>
<style type="text/css">
body{ background-color:pink;}
#box{ margin:auto; width:200px; height:50px; background-color:green;
-webkit-transition:background-color 3s;
-moz-trasition:background-color 3s;
-o-transition:background-color 3s;
}
#box:hover{
background-color:red;
-webkit-transition:background-color 3s;<!-- 兼容 Safari 和 Chrome -->
-moz-trasition:background-color 3s;<!--兼容 Firefox 4 -->
-o-transition:background-color 3s;<!--兼容 Opera -->
}
</style>
</head>
<body>
<div id="box">
transition过度效果
</div>
</body>
</html>
#box:hover{}就是当鼠标移动到div上时触发{}里面的内容，相当于我们在桌面上右击会得到popMenu一样，是一个Event，都会有Listener监听。
#box{}里面写
-webkit-transition:background-color 3s;
-moz-trasition:background-color 3s;
-o-transition:background-color 3s;主要是为了当鼠标从box上移开是颜色能够渐变。
时间： 2024-10-10 23:12:16