transition+transform合并效果案例

最新推荐文章于 2023-12-07 16:20:35 发布

a90232003

最新推荐文章于 2023-12-07 16:20:35 发布

阅读量418

点赞数

原文链接：http://www.cnblogs.com/zhuwenqin/p/7993135.html

版权

<!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>

转载于:https://www.cnblogs.com/zhuwenqin/p/7993135.html

a90232003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transition+transform合并效果案例

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> li{width:100px;height:100px;background...
复制链接

扫一扫