transition过度 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transtition</title>
    <style>
        .zero{
            height:100px;
            width:100px;
            background-color:white;
            transition: background-color 0.5s ease-in 0s;
            float:left;
            margin-left:10px;
        }
        .zero:hover{
            background-color:gray;
        }

    </style>
</head>
<body>
    <div class='zero'></div>
    <div class='zero'></div>
    <div class='zero'></div>
    <div class='zero'></div>
    <div class='zero'></div>
    <div class='zero'></div>
    <div class='zero'></div>
    <div class='zero'></div>
    <div class='zero'></div>
</body>
</html>

这时比较简单的过度可以实现一些简单的类似动画的效果，实现过渡一定要具备四个要素：

1.指定过渡属性，如background、color等
2.指定过渡所需时间
3.指定过渡函数，即过渡的速度、方式等
4.指定过渡延迟时间，表示开始执行的时间

这样就可以实现过渡由于是符合元素可以直接这样写transition: <property> <duration> <timing-function> <delay>。

 

posted on 2016-07-13 12:02  一梦清水  阅读(211)  评论(0)    收藏  举报

导航