演示效果

CSS样式

.wechat_tips{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(44,34,39,0.9);
    padding:20px 50px 20px 30px;
    min-height: 50px;
    color: #fff;
}

.wechat_tips .arrow{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
}




.bounceInDown {
    -webkit-animation-name: bounceInDown;
    -webkit-animation: bounceInDown 0.6s forwards;
    animation: bounceInDown 0.6s forwards;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes bounceInDown{
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);
    }
    80% {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

html 代码

{if isWeixin()}
    <div class="wechat_tips animated bounceInDown">
        <span>点击右上角按钮，然后在弹出的菜单中，点击【在{$name}中打开】，即可安装</span>
        <img class="arrow" src="https://static.pgyer.com/static-20190924/assets/img/alert-arrow.png">
    </div>
{/if}