transition+transform合併效果案例

時間 2019-11-17

標籤 transition+transform 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>

案例二：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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。