底圖與蒙版的過渡效果transition

時間 2019-11-16

標籤過渡效果 transition 简体版

原文原文鏈接

我用2種方法寫了底圖與蒙版的過渡效果css

方法一：用js方法html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>transition</title>
    </head>
    <body>
        <div class="part" id="part" style="width: 30%;margin: 0 auto;position: relative;">
    <!--此處爲底圖-->
    <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/ayqgy4nj.png" style="width: 100%">
    <!--此處爲蒙版部分-->
            <div class="maskPart" id="maskPart" style="width: 100%;position: absolute;left: 0;bottom: 0;display:none;">
        <!--蒙版圖片-->
        <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/j5fe3wv3.png" style="width: 100%;">
        <!--蒙版文字-->
        <div style="position: absolute;bottom: 0;left: 0;width: 95%;text-align: center;margin: 0 auto;color: #FFFFFF;padding-bottom: 1em;">
            <p style="margin: 0;padding: 0;">此處爲標題部分</p>
            <p style="margin: 0;padding: 0;">此處爲副標題部分</p>
        </div>
    </div>
</div>
        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    </body>
</html>

        $("#part").hover(function () {
            $("#maskPart").fadeIn('solw')
        },function () {
            $("#maskPart").fadeOut('slow')
        });

效果圖：http://runjs.cn/detail/cqzb6birjquery

方法二：用css方法web

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>transition</title>
    </head>
    <body>
        <div class="part" id="part" style="width: 30%;margin: 0 auto;position: relative;">
    <!--此處爲底圖-->
    <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/ayqgy4nj.png" style="width: 100%">
    <!--此處爲蒙版部分-->
    <div class="maskPart" id="maskPart" style="width: 100%;position: absolute;left: 0;bottom: 0;opacity: 0;">
        <!--蒙版圖片-->
        <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/j5fe3wv3.png" style="width: 100%;">
        <!--蒙版文字-->
        <div style="position: absolute;bottom: 0;left: 0;width: 95%;text-align: center;margin: 0 auto;color: #FFFFFF;padding-bottom: 1em;">
            <p style="margin: 0;padding: 0;">此處爲標題部分</p>
            <p style="margin: 0;padding: 0;">此處爲副標題部分</p>
        </div>
    </div>
</div>
        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    </body>
</html>

        $("#part").hover(function () {
            console.log("opacity=0");
            $("#maskPart").css({
                "transition": "opacity 1s",
                "-webkit-transition": "opacity 1s",
                "-moz-transition": "opacity 1s",
                "-o-transition": "opacity 1s",
                "-ms-transition": "opacity 1s",
                "opacity": "1"
            });
        },function () {
            console.log("opacity=1");
            $("#maskPart").css({
                "opacity": "0"
            });
        });

效果圖：http://runjs.cn/detail/yvc7rajtui

--------------------------------spa

我嘗試用transition方法寫display方法，好像是行不通。因而用opacity方法代替code

用js方法：當鼠標懸浮與離開的操做來回重複屢次切速度很快，js方法會屢次調用，有點繁瑣htm

用css方法：當鼠標執行相同的操做，css只會調用最後一次的操做，比較簡潔blog

相關標籤/搜索

每日一句

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