慕课前端入门-CSS过渡

1.过渡

过渡transition：

1. 允许css的属性值在一定时间区间内平滑地过渡
2.在鼠标单击、获得焦点、被点击、或对元素任何改变中触发，并圆滑的以动画效果改变css的属性值。

可以将过渡理解为动画

2.transition-property属性

检索或设置对象中的参与过渡的属性。

transition-property:none | all | property
/*
none：没有属性改变
alll：所有属性改变，默认值
property：元素属性名
*/

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow</title>
    <style type="text/css">
        body{background:#abcdef;}
        div{
            width: 800px;height: 800px;margin:auto;transform: rotate(0deg);
            background:url("wechat.jpeg") no-repeat center center;
            -webkit-transition-property:transform;
            -moz-transition-property:transform;
            -ms-transition-property:transform;
            -o-transition-property:transform;
            transition-property:transform;
        }
        div:hover{
            cursor: pointer;transform: rotate(180deg);
            background:url("wechat.jpeg") no-repeat center center;
            -webkit-transition-property:transform;
            -moz-transition-property:transform;
            -ms-transition-property:transform;
            -o-transition-property:transform;
            transition-property:transform;
        }
    </style>
</head>
<body>
   <div></div>
</body>
</html>

3.transtion-duration属性

检索或设置对象多度的持续时间

transition-duration:time;
/*参数说明：
规定完成过渡效果需要花费的时间，以秒或毫秒计
默认值为0
*/

示例

    <style type="text/css">
        body{background:#abcdef;}
        div{
            width: 800px;height: 800px;margin:auto;transform: rotate(0deg);
            background:url("wechat.jpeg") no-repeat center center;
            -webkit-transition-property:transform;
               -moz-transition-property:transform;
                -ms-transition-property:transform;
                 -o-transition-property:transform;
                    transition-property:transform;
            -webkit-transition-duration:2s;
               -moz-transition-duration:2s;
                -ms-transition-duration:2s;
                 -o-transition-duration:2s;
                    transition-duration:2s;
        }
        div:hover{
            cursor: pointer;transform: rotate(180deg);
            background:url("wechat.jpeg") no-repeat center center;
            -webkit-transition-property:transform;
               -moz-transition-property:transform;
                -ms-transition-property:transform;
                 -o-transition-property:transform;
                    transition-property:transform;
            -webkit-transition-duration:2s;
               -moz-transition-duration:2s;
                -ms-transition-duration:2s;
                 -o-transition-duration:2s;
                    transition-duration:2s;
        }
    </style>

4.transition-timing-function属性

检索或设置对象中过渡的动画类型

transition-timing-function:value;
/* 参数说明：
linear：线性过渡，等同于贝塞尔曲线( 0.0, 0.0, 1.0, 1.0)
ease：平滑过渡，等同于贝塞尔曲线( 0.25, 0.1, 0.25,  1.0)
ease-in：由慢到快，等同于贝塞尔曲线( 0.42, 0.0, 1.0, 1.0)
ease-out：由快到慢，等同于贝塞尔曲线( 0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢，等同于贝塞尔曲线( 0.42, 0, 0.58, 1.0)
step-start：等同于step(1, start)
step-end：等同于step(1, end)
step(<Integer>[, [start | end]]?)：接受2个参数的步进函数。
第一个参数：必须为正整数，指定函数的步数。
第二个参数：取值可是start或end，指定每一步的值发生变化的时间点。可选，默认end
*/

示例

    <style type="text/css">
        body{background:#abcdef;}
        div{
            width: 800px;height: 800px;margin:auto;transform: rotate(0deg);
            background:url("wechat.jpeg") no-repeat center center;
            -webkit-transition-property:transform;
               -moz-transition-property:transform;
                -ms-transition-property:transform;
                 -o-transition-property:transform;
                    transition-property:transform;
            -webkit-transition-duration:2s;
               -moz-transition-duration:2s;
                -ms-transition-duration:2s;
                 -o-transition-duration:2s;
                    transition-duration:2s;
            -webkit-transition-timing-function:ease-in-out;
               -moz-transition-timing-function:ease-in-out;
                -ms-transition-timing-function:ease-in-out;
                 -o-transition-timing-function:ease-in-out;
                    transition-timing-function:ease-in-out;
        }
        div:hover{
            cursor: pointer;transform: rotate(180deg);
            background:url("wechat.jpeg") no-repeat center center;
            -webkit-transition-property:transform;
               -moz-transition-property:transform;
                -ms-transition-property:transform;
                 -o-transition-property:transform;
                    transition-property:transform;
            -webkit-transition-duration:2s;
               -moz-transition-duration:2s;
                -ms-transition-duration:2s;
                 -o-transition-duration:2s;
                    transition-duration:2s;
            -webkit-transition-timing-function:ease-in-out;
               -moz-transition-timing-function:ease-in-out;
                -ms-transition-timing-function:ease-in-out;
                 -o-transition-timing-function:ease-in-out;
                    transition-timing-function:ease-in-out;
        }
    </style>

5.transition-delay属性

检索或设置对象延迟过渡的时间

transition-delay:time;
/*参数说明：
指定秒或毫秒数。默认0。
如果设置了时间，动画将在等待该时间后再执行
*/

示例

    <style type="text/css">
        body{background:#abcdef;}
        div{
            width: 800px;height: 800px;margin:auto;transform: rotate(0deg);
            background:url("wechat.jpeg") no-repeat center center;
            -webkit-transition-property:transform;
               -moz-transition-property:transform;
                -ms-transition-property:transform;
                 -o-transition-property:transform;
                    transition-property:transform;
            -webkit-transition-duration:2s;
               -moz-transition-duration:2s;
                -ms-transition-duration:2s;
                 -o-transition-duration:2s;
                    transition-duration:2s;
            -webkit-transition-timing-function:ease-in-out;
               -moz-transition-timing-function:ease-in-out;
                -ms-transition-timing-function:ease-in-out;
                 -o-transition-timing-function:ease-in-out;
                    transition-timing-function:ease-in-out;
            -webkit-transition-delay:1s;
               -moz-transition-delay:1s;
                -ms-transition-delay:1s;
                 -o-transition-delay:1s;
                    transition-delay:1s;
        }
        div:hover{
            cursor: pointer;transform: rotate(180deg);
            background:url("wechat.jpeg") no-repeat center center;
            -webkit-transition-property:transform;
               -moz-transition-property:transform;
                -ms-transition-property:transform;
                 -o-transition-property:transform;
                    transition-property:transform;
            -webkit-transition-duration:2s;
               -moz-transition-duration:2s;
                -ms-transition-duration:2s;
                 -o-transition-duration:2s;
                    transition-duration:2s;
            -webkit-transition-timing-function:ease-in-out;
               -moz-transition-timing-function:ease-in-out;
                -ms-transition-timing-function:ease-in-out;
                 -o-transition-timing-function:ease-in-out;
                    transition-timing-function:ease-in-out;
            -webkit-transition-delay:1s;
               -moz-transition-delay:1s;
                -ms-transition-delay:1s;
                 -o-transition-delay:1s;
                    transition-delay:1s;
        }
    </style>

6.复合属性transition

transition: property duration timing-function delay;

示例

    <style type="text/css">
        body{background:#abcdef;}
        div{
            width: 800px;height: 800px;margin:auto;transform: rotate(0deg);
            background:url("wechat.jpeg") no-repeat center center;
            -webkit-transition:transform 2s ease-in-out 1s;
               -moz-transition:transform 2s ease-in-out 1s;
                -ms-transition:transform 2s ease-in-out 1s;
                 -o-transition:transform 2s ease-in-out 1s;
                    transition:transform 2s ease-in-out 1s;
        }
        div:hover{
            cursor: pointer;transform: rotate(180deg);
            background:url("wechat.jpeg") no-repeat center center;
            -webkit-transition:transform 2s ease-in-out 1s;
               -moz-transition:transform 2s ease-in-out 1s;
                -ms-transition:transform 2s ease-in-out 1s;
                 -o-transition:transform 2s ease-in-out 1s;
                    transition:transform 2s ease-in-out 1s;
        }
    </style>

posted on 2020-09-01 22:23 singleSpace 阅读(140) 评论(0) 编辑收藏举报