css3过渡

最新推荐文章于 2024-09-20 14:39:18 发布

江浙沪柯蓝

最新推荐文章于 2024-09-20 14:39:18 发布

阅读量1.8k

点赞数

文章标签： css3 过渡 transition

本文链接：https://blog.csdn.net/zhaobw831/article/details/50516623

版权

DEMO1

        img {
            width: 192px;
            height: 108px;
            /*transition:5s height,5s 1s width;*/ /*height过渡后 延迟一秒width开始过渡，过渡时间为5s*/
            /*transition:5s height,1s width;*/ /*height5秒过渡完成，width1秒过渡完成*/
            /*transition: 5s;*/
            /*transition-delay:5s;*/ /*延迟5s执行过渡*/
            /*
                linear->匀速
                ease(默认)-> 先加速，后减速
                ease-in->加速
                ease-out->减速
                cubic-bezier(n,n,n,n)->自定义
            */
            transition: 5s ease;
        }

            img:hover {
                width: 960px;
                height: 540px;
            }

DEMO2

        div {
            width: 100px;
            height: 100px;
            background:#00ff21;
            transition: width 2s,height 2s;
            -webkit-transition:width 2s,height 2s,-webkit-transform 2s;/* Safari and Chrome */
        }

            div:hover {
                width: 200px;
                height: 200px;
                transform:rotate(180deg);
                -webkit-transform:rotate(180deg); /* Safari and Chrome */
            }