transition的用法

时间 2019-11-17

标签 transition 用法繁體版

原文原文链接

transition是CSS样式的一个属性，无聊之余看了一下，分享一下。css

transition的语法：html

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监听。web

#box{}里面写ui

　　　　-webkit-transition:background-color 3s;
        -moz-trasition:background-color 3s;
        -o-transition:background-color 3s;主要是为了当鼠标从box上移开是颜色可以渐变。