bootstrap 中有用的焦点叠加

Question

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

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

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

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

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

有人用过这种产品吗？

Answer 1

我不是很熟悉你提到的两个展示柜，但是 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 动画示例，这些示例甚至更复杂。

bootstrap 中有用的焦点叠加

helpful focus overlay in bootstrap

forms

twitter-bootstrap

focus

popover

纯粹CSS

更复杂CSS

MD Bootstrap 图书馆

UI 饼干