第六课--过渡....

transition:动画持续时间,动画属性的作用是赋值给元素，整个元素都在使用这个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
</head>
<style>
    .div1 {
        width: 200px;
        height: 300px;
        background-color: #4cae4c;
        transition: 5s;
    }

    .div1:hover {

        width: 500px;
    }

    .div2 {
        width: 100px;
        height: 200px;
        background-color: #5bc0de;
        transition: width 2s, height 2s, transform 2s;
    }

    .div2:hover {
        width: 500px;
        height: 600px;
        transform: rotate(180deg);
    }
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>