【问题标题】:helpful focus overlay in bootstrap引导程序中有用的焦点覆盖
【发布时间】:2020-07-24 19:17:29
【问题描述】:

我们在 iOS 中使用 Material Showcase 和在 Android 中使用 FancyShowCaseView 来提供教程式

  • 显示动画
  • 让用户关注特定的视图或位置

有什么我们可以用于引导程序的东西吗?我们(绝望地)查看了模态弹出框,但它们并没有很好地工作。

如果它与 jquery 兼容,它仍然可以。

我们想简单地传递一个 div 并给它“焦点”并访问某种解除回调。

有人对这类产品有任何经验吗?

【问题讨论】:

    标签: forms twitter-bootstrap focus popover


    【解决方案1】:

    我对你提到的两个展示不是非常熟悉,但动画可以使用 bootstrap 和 JQuery 实现,并且有多种可能性。我会在下面列出一些我知道的。

    纯 CSS

    纯粹的CSS Animations 是最基本的,但并不总是很优雅。

    更复杂的 CSS

    This 示例展示了如何获得一个简单的注意力获得眨眼动画。它可能对如何制作更复杂的 CSS 动画有所启发:

    HTML:

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->
    
    <div class="container">
        <div class="row">
            <div class="container">
        <div class="row">
        <a href="#" class="intro-banner-vdo-play-btn pinkBg" target="_blank">
    <i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
    <span class="ripple pinkBg"></span>
    <span class="ripple pinkBg"></span>
    <span class="ripple pinkBg"></span>
    </a>
        </div>
    </div>
    
    </div>
    

    CSS:

    .pinkBg {
        background-color: #ed184f!important;
        background-image: linear-gradient(90deg, #fd5581, #fd8b55);
    }
    .intro-banner-vdo-play-btn{
        height:60px;
        width:60px;
        position:absolute;
        top:50%;
        left:50%;
        text-align:center;
        margin:-30px 0 0 -30px;
        border-radius:100px;
        z-index:1
    }
    .intro-banner-vdo-play-btn i{
        line-height:56px;
        font-size:30px
    }
    .intro-banner-vdo-play-btn .ripple{
        position:absolute;
        width:160px;
        height:160px;
        z-index:-1;
        left:50%;
        top:50%;
        opacity:0;
        margin:-80px 0 0 -80px;
        border-radius:100px;
        -webkit-animation:ripple 1.8s infinite;
        animation:ripple 1.8s infinite
    }
    
    @-webkit-keyframes ripple{
        0%{
            opacity:1;
            -webkit-transform:scale(0);
            transform:scale(0)
        }
        100%{
            opacity:0;
            -webkit-transform:scale(1);
            transform:scale(1)
        }
    }
    @keyframes ripple{
        0%{
            opacity:1;
            -webkit-transform:scale(0);
            transform:scale(0)
        }
        100%{
            opacity:0;
            -webkit-transform:scale(1);
            transform:scale(1)
        }
    }
    .intro-banner-vdo-play-btn .ripple:nth-child(2){
        animation-delay:.3s;
        -webkit-animation-delay:.3s
    }
    .intro-banner-vdo-play-btn .ripple:nth-child(3){
        animation-delay:.6s;
        -webkit-animation-delay:.6s
    }
    
    

    MD 引导库

    MD Bootstrap Library 具有更复杂的动画,这些动画易于使用,并且与纯 CSS 动画相比,所需的代码更少。 Attention Seeker 动画似乎与我在快速搜索 Material Showcase 时看到的一些动画最相似。上面的链接在一页上有很多示例,因此您可以查看支持的行为类型。

    用户界面 Cookies

    This site 也有许多免费和许可的引导动画示例,这些示例甚至更加复杂。

    【讨论】:

    • 谢谢,是的,我很欣赏它可以通过其他方式完成,我只是很惊讶在任何地方都没有 $('div.target').showcase({ text: 'this is an important message', onComplete: function () {}}); 库。过去在 HTML 中显然有过这样的库。但他们都是 8 岁以上
    • 我是真的,我开始尝试使用 css 动画制作自己的动画,但实际上并没有明显的方法来做到这一点。如果我找到一个或得到一个工作,我会用它更新我的答案
    猜你喜欢
    • 2022-01-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多