CSS 之过度（Transaction）

一、属性

Properties
属性		Description
简介
transition 复合属性。检索或设置对象变换时的过渡效果
transition-property 检索或设置对象中的参与过渡的属性
transition-duration 检索或设置对象过渡的持续时间
transition-timing-function 检索或设置对象中过渡的类型
transition-delay 检索或设置对象延迟过渡的时间

transition取值：

[ transition-property ]：检索或设置对象中的参与过渡的属性

[ transition-duration ]：检索或设置对象过渡的持续时间

[ transition-timing-function ]：检索或设置对象中过渡的动画类型

[ transition-delay ]：检索或设置对象延迟过渡的时间 

二、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过度</title>
    <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>

posted @ 2019-12-14 09:07  样子2018  阅读(2536)  评论(0)    收藏  举报