CSS3弹窗动画效果

明知山

发布于 2020-09-03 10:52:22

2K0

发布于 2020-09-03 10:52:22

文章被收录于专栏：前端开发随笔

弹窗从上到下动画

.fadein {
    animation: fadein .5s;
}
@keyframes fadein {
    0% {
        transform: translate(0, -100%);
    }
    100% {
        transform: none;
    }
}

弹窗从下到上动画

.fadein {
    animation: fadein .5s;
}
@keyframes fadein {
    0% {
        transform: translate(0, 100%);
    }
    100% {
        transform: none;
    }
}

弹窗从右向左动画

.fadein {
    animation: fadein .5s;
}
@keyframes fadein {
    0% {
        transform: translate(100%, 0);
    }
    100% {
        transform: none;
    }
}

弹窗从左向右动画

.fadein {
    animation: fadein .5s;
}
@keyframes fadein {
    0% {
        transform: translate(-100%, 0);
    }
    100% {
        transform: none;
    }
}

通过改变css属性也可以达到类似效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            position: fixed;
            top: -200px;
            left: 0;
            width: 100%;
            height: 200px;
            background: silver;
        }

        .fade {
            transition: all .6s;
        }

        .control {
            position: fixed;
            bottom: 0;
            left: 0;
            color: #fff;
            font-size: 40px;
            width: 100%;
            height: 150px;
            display: flex;
            cursor: pointer;
        }

        .control div {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .in {
            background: steelblue;
        }

        .out {
            background: grey;
        }
    </style>
</head>

<body>
    <div class="top fade"></div>
    <div class="control">
        <div class="in">显示</div>
        <div class="out">隐藏</div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $('.in').click(function () {
        $('.top').css('top', '0')
    })
    $('.out').click(function () {
        $('.top').css('top', '-200px')
    })
</script>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/12/07 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css