transition的用法

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上移开是颜色能够渐变。
posted @ 2015-11-13 15:47  流氓公子  阅读(1655)  评论(0编辑  收藏  举报