bootstrap 中有用的焦点叠加

helpful focus overlay in bootstrap

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

有什么我们可以用于 bootstrap 的东西吗?我们(绝望地)研究了模态弹出窗口,但它们并没有真正发挥作用。

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

我们想简单地传递一个 div 并赋予它“焦点”并可以访问某种关闭回调。

有人用过这种产品吗?

我不是很熟悉你提到的两个展示柜,但是 bootstrap 和 JQuery 可以制作动画,并且有多种可能性。我会在下面列出一些我知道的。

纯粹CSS

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

更复杂CSS

This示例展示了如何获得一个简单的attention getting blink动画。它可能对如何制作更复杂的 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 Bootstrap 图书馆

与纯 CSS 动画相比,MD Bootstrap Library 具有更复杂的动画,这些动画易于使用并且需要更少的代码才能发挥作用。 Attention Seeker 动画看起来与我在快速搜索 Material Showcase 时看到的一些动画最相似。上面的 link 在一页上有很多例子,所以你可以看到支持什么样的行为。

UI 饼干

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