Question

我在Jquery上创建了这个Crossfade效果：

＆＃13;

function doAnimationLoop(o, n, t, i, a) {
        fadeInOut(o, n, t, i, function() {
            setTimeout(function() {
                doAnimationLoop(o, n, t, i, a)
            }, a)
        })
    }
    
    function fadeInOut(o, n, t, i, a) {
        return $(o).animate({
            opacity: 1
        }, n).delay(t).animate({
            opacity: 0
        }, i, a)
    }
    var duration = 20,
        fadeAmount = .3;
    $(document).ready(function() {
        var o = $("#slideshow img"),
            n = o.size(),
            t = 3e3 * duration,
            i = t / n,
            a = i * fadeAmount,
            e = i - i * fadeAmount * 2,
            u = e * (n - 1) + a * (n - 2);
        o.each(function(o, n) {
            0 != o ? ($(n).css("opacity", "0"), setTimeout(function() {
                doAnimationLoop(n, a, e, a, u)
            }, e * o + a * (o - 1))) : setTimeout(function() {
                $(n).animate({
                    opacity: 0
                }, a, function() {
                    setTimeout(function() {
                        doAnimationLoop(n, a, e, a, u)
                    }, u)
                })
            }, e)
        })
    });

＆＃13;

.home h1 {
    font-family: 'Open Sans';
    font-size: 5em;
}

.main {
    text-shadow: 0px 0px 10px #696969;
    position: absolute;
    top: 2em;
    color: #f6f6f6; 
    font-weight: 900;
    z-index: 999;
}

.sub-main {
    font-weight: 100;
    position: absolute;
    top: 3em;
    color: white;
    text-shadow: 0px 0px 50px #696969 !important;
    z-index: 999;
}

#slideshow img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!--- Home --->
    <div class="container-fluid home" id="home">
        <div id="slideshow">
        
        <img src="http://assets1.ignimgs.com/2017/01/25/kingdomhearts28-1280-1485381321286_1280w.jpg" />
        
        <img src="http://s2.glbimg.com/C4MoBvLkWM9NFo8gtXNd9-mP-I8=/850x446/s.glbimg.com/po/tt2/f/original/2016/02/04/kingdom-hearts-4.jpg" />
        
        <img src="http://static.zerochan.net/Kingdom.Hearts.II.full.873765.jpg" />
        
        <img src="http://www.geekgirlauthority.com/wp-content/uploads/2016/10/Kingdom-Hearts.jpg" />
        
        <img src="http://2.bp.blogspot.com/-HS5t27V1LYw/UBGLg9eBDII/AAAAAAAABmY/A0U6fCuyDFc/s1600/Kingdom_Hearts_Wallpaper_by_Wightwizard8.jpg" />
        
        <img src="http://www.hardcoregamer.com/wp-content/uploads/2017/01/Kingdom-Hearts-Saga-747x309.jpg" />
        
      </div>
      <section class="row">
        <div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
          <h1 class="main" style="z-index: 100;">Title</h1>
          <h1 class="sub-main" style="z-index: 100;">Tagline</h1>
        </div>
      </section>
      </div>

＆＃13;

我面临的问题是我以前从未遇到的问题......

我想在这些图片的顶部添加文字，每张图片都有标题/标语。我希望文字随着图像淡出!!

如何使用淡化图像制作淡化文字？

谢谢！

Answer 1

将此添加到您的css：

.anim{
    animation: opac 2s infinite;
}
@keyframes opac{
    from {opacity:0} 
    to {opacity:1}
}

然后将班级anim添加到您的标题，标语中并告诉您这是否是您想要的？

使用淡化图像添加淡化文本=＆gt; JQuery的

1 个答案: