transition+transform合并效果案例 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li{width:100px;height:100px;background-color:#003399;list-style:none;color:#fff;
            transition: all 2s linear;margin-bottom:10px;
        }
        li.linear_translate:hover{
            transform:translate(20px,30px); /*平移属性*/
        }
        li.ease_skew:hover{
            /*transform:skew(30deg,30deg);*/
            transform:skew(30deg);
            transform:skew(0deg,30deg);/*倾斜属性*/
        }
        li.easeIn_scale:hover{
            transform:scale(2,.5); /*缩放属性*/
        }
        li.easeOut_rotate:hover{
            transform:rotate(30deg); /*旋转属性*/
        }
    </style>
</head>
<body>
<ul>
    <li class="linear_translate">平移属性</li>
    <li class="ease_skew">斜切属性</li>
    <li class="easeIn_scale">缩放属性</li>
    <li class="easeOut_rotate">旋转属性</li>
</ul>
</body>
</html>

 

案例二：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        img{width:300px;height:300px;cursor:pointer;
            -webkit-transition: all 2s .2s ease-in-out;
            -moz-transition: all 2s .2s ease-in-out;
            -ms-transition: all 2s .2s ease-in-out;
            -o-transition: all 2s .2s ease-in-out;
            transition: all 2s .2s ease-in-out;
        }
        .img1{position:absolute;opacity:0;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -ms-transform: scale(0);
            -o-transform: scale(0);
            transform: scale(0);
        }
        .bannerWrap:hover .img1{
            opacity:1;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }
        .bannerWrap:hover .img2{
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -ms-transform: scale(0);
            -o-transform: scale(0);
            transform: scale(0);
        }
    </style>
</head>
<body>
    <div class="bannerWrap">
        <img class="img img1" src="1.jpg" alt="" />
        <img class="img img2" src="2.jpg" alt="" />
    </div>
</body>
</html>

 

posted @ 2017-12-07 15:22  未来不欣赏眼泪  阅读(1623)  评论(0)  编辑  收藏  举报