• 0
  • 0

微信浏览器顶部友好弹窗提示打开浏览器

2019-09-28 34 0 admin 所属分类:HTML

演示效果

  

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}



返回顶部