js结合css3动画

最新推荐文章于 2021-09-17 15:44:02 发布

weixin_34029949

最新推荐文章于 2021-09-17 15:44:02 发布

阅读量135

点赞数

效果：点击按钮，提示信息过渡1s出现，然后过渡一秒自动消失，居中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
    <style>
        .show-msg {
            opacity:0;
            transition: all 1s;
        }
        .msg {
            font-size: 18px;
            color: #fff;
            background-color: rgba(0,0,0,.6);
            padding:10px 15px;
            margin:50px auto;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<button class="btn">btn</button>
<div class="show-msg">
    <p class="msg"></p>
</div>
    <script>
    var msgDom = document.querySelector('.msg')
    var btn = document.querySelector('.btn')
    var showMsg = document.querySelector('.show-msg')
        function show (msg) {
            msgDom.innerHTML = msg
            showMsg.style.display = 'flex'
            showMsg.style.opacity = '1'
            setTimeout(function(){
                showMsg.style.opacity = '0'
            },1000)
        }
        btn.addEventListener('click',function() {
            show('good')
        },false)
    </script>
</body>
</html>

关注博主即可阅读全文