過分

時間 2019-12-07

標籤過分简体版

原文原文鏈接

css3的過分配上動畫的效果，讓你的頁面更加動態和美化：css

[ transition-property ]：檢索或設置對象中的參與過渡的屬性html

[ transition-duration ]：檢索或設置對象過渡的持續時間前端

[ transition-timing-function ]：檢索或設置對象中過渡的動畫類型css3

[ transition-delay ]：檢索或設置對象延遲過渡的時間 web

下面請看實例代碼：動畫

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>transition_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1{font-size:16px;}
.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}
.test li{float:left;width:100px;height:100px;margin:0 5px;border:1px solid #ddd;background-color:#eee;text-align:center;-moz-transition:background-color .5s ease-in;-webkit-transition:background-color .5s ease-in;-o-transition:background-color .5s ease-in;-ms-transition:background-color .5s ease-in;transition:background-color .5s ease-in;}
.test li:nth-child(1):hover{background-color:#bbb;}
.test li:nth-child(2):hover{background-color:#999;}
.test li:nth-child(3):hover{background-color:#630;}
.test li:nth-child(4):hover{background-color:#090;}
.test li:nth-child(5):hover{background-color:#f00;}
</style>
</head>
<body>
<h1>請將鼠標移動到下面的矩形上：</h1>
<ul class="test">
<li>背景色過渡</li>
<li>背景色過渡</li>
<li>背景色過渡</li>
<li>背景色過渡</li>
<li>背景色過渡</li>
</ul>
</body>
</html>
htm

相關標籤/搜索

每日一句

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