CSS3过渡 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3过渡</title>

    <style type="text/css">
               *{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            transition:all  3s linear 2s;
            /**
            all：    transition-property
            3s :     transition-duration
            linear:  transition-timing-function
            2s:      transition-delay
            */
        }
        div:hover{
            background-color: red;
            font-size: 25px;
            transform: rotate(90deg) scale(1.5); /*旋转的同时放大1.5倍  这两个效果 一次性到位*/
            /*transition属性的值：
             01.transition-property:过渡的css属性的名称（color,font-size,background）等！
                                想给多个属性设置过渡效果，使用all！
             02.transition-duration:过渡效果需要的时间！
             03.transition-timing-function:设置速度曲线！
                         ease：慢速开始，之后变快！
                       linear：匀速!
                       ease-in:慢速开始！
                       ease-out:慢速结束！
             04.transition-delay:过度效果开始前需要等待的时间！默认 0s!
            */
        }
    </style>
</head>
<body>
<div>
    大家辛苦了！
</div>
</body>
</html>

 

posted @ 2017-11-02 22:06  亲亲的我来了  阅读(93)  评论(0)    收藏  举报