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上移開是顏色可以漸變。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。