引导中有帮助的焦点覆盖
引导中有帮助的焦点覆盖
提问于 2020-07-24 19:17:29
我们在iOS中使用iOS，在Android中使用FancyShowCaseView来提供教程。
- 展示动画
- 将用户集中在特定的视图或位置上
有什么我们可以用来引导的东西也可以这样做吗？我们(在绝望中)看到了模式弹出，但它们并没有很好地发挥作用。
如果它与jquery兼容，它仍然很好。
我们只想简单地传递一个div，并给予它“焦点”，并访问某种类型的撤销回调。
有人有这种产品的经验吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-30 19:33:31
我不太熟悉你提到的两个展示案例，但是通过引导和JQuery动画是可能的，有各种各样的可能性。下面我会列出我知道的几个。
纯CSS
纯CSS动画最基本，但并不总是很优雅。
更复杂的CSS
这示例展示了如何获得一个简单的注意，获得闪烁动画。它可能对如何制作更复杂的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引导程序库
与纯CSS动画相比，MD引导程序库具有更复杂的动画，易于使用，并且需要更少的代码才能获得功能。注意力探索者的动画似乎与我在快速搜索材料展示时看到的一些相似之处。上面的链接在一个页面上有很多例子，所以您可以看到支持什么样的行为。
UI饼干
本站还提供了许多免费和许可的引导动画示例，这些示例甚至更加复杂。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63080168
复制相关文章
相似问题
腾讯云开发者
