logo标签列表

CSS从左到右渐变

javascriptjquerycssfade
13

有没有一种仅使用CSS就能使元素（至少是文本）从左到右或者从右到左淡入淡出的方法？

这里展示了我想要的效果：

图片描述

如果需要jQuery的话，作为备选方案也可以接受。

2
你可以使用一个额外的图层，其中包含一个渐变（从白色到透明），并将该图层水平移动以获得所需的效果。 - feeela
@feeela，这就是我认为最好的方法，但我不确定如何实现上述效果，因为图层只会返回而不是继续沿着相同方向移动。 - Bobe
在文本上方放置一个图层并动画渐变？这可能可行，但我已经很久没有使用CSS3渐变了。 - Zeta
如果有什么需要，就像Geuis所说的那样，它只会是一个PNG，而不是CSS3渐变。我可以很容易地做到这一点，但诀窍在于使图层在鼠标移出时沿着相同的方向移动。除非...我只需将该图层制作为一个带有反向渐变的精灵，并在悬停和鼠标移出时将背景上下移动。 - Bobe
@Zeta 目前在 CSS3 中还没有实现渐变动画的方法。或许将来会有… - feeela
4个回答
27

是的，您可以使用CSS3动画（在这里检查浏览器支持情况）。

这里有一个简单的文字淡出示例。

HTML：

.text {
        position:relative;
        line-height:2em;
        overflow:hidden;
    }
    .fadingEffect {
        position:absolute;
        top:0; bottom:0; right:0;
        width:100%;
        background:white;
        -moz-animation: showHide 5s ease-in alternate infinite; /* Firefox */
        -webkit-animation: showHide 5s ease-in alternate infinite; /* Safari and Chrome */
        -ms-animation: showHide 5s ease-in alternate infinite; /* IE10 */
        -o-animation: showHide 5s ease-in alternate infinite; /* Opera */
        animation: showHide 5s ease-in alternate infinite;
    }
    @-webkit-keyframes showHide { /* Chrome, Safari */
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
    @-moz-keyframes showHide { /* FF */
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
    @-ms-keyframes showHide { /* IE10 */
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
    @-o-keyframes showHide { /* Opera */
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
    @keyframes showHide {
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
<div class="text">
    There is some text here!
    <div class="fadingEffect"></div>
 </div>

CSS：

正如您所看到的，边框之间存在明显的对比。如果您使用图像渐变而不是纯白背景，则会呈现更好的效果。

然后，您可以在IE9及以下版本中使用jQuery回退。

有没有可能实现相同的效果，但不使用背景呢？因为如果在图像上使用它，你会看到一个白色背景矩形。谢谢。 - Jose
1
在Photoshop或其他图像编辑软件中，创建一个圆形区域，在中间是透明的，四周渐变为纯白色。可以根据需要裁剪顶部/底部。然后，您可以使用CSS过渡将图形从左到右动画显示，以在演示中实现效果。对于像IE这样不支持过渡的浏览器，请使用jQuery中的cssHooks功能来执行动画。
您可以使用CSS渐变来创建此效果，但会遇到浏览器支持问题，并且在CSS渐变上使用过渡在性能方面非常糟糕。然而，简单地动画显示png24非常容易并产生相同的效果。
1
我找到了一个包含多种文本动画的插件。
示例: https://tobiasahlin.com/moving-letters/ 演示代码: https://jsfiddle.net/Danzoftw/hp8qL1e3/7/ 

var textWrapper = document.querySelector('.demo');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.demo .letter',
    opacity: [0,1],
    easing: "easeInOutQuad",
    duration: 2250,
    delay: (el, i) => 150 * (i+1)
  }).add({
    targets: '.demo',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<h1 class="demo">Text animation demo</h1>

希望这能帮助其他人。干杯。
0

适用于任何背景的淡入文字 - 纯CSS

最受赞同的答案不能适用于任何背景（如图像），因为它创建了一个可见的覆盖元素。

这个示例适用于任何背景（在Firefox、Chrome和Edge上测试过）。

.fade-in-text {
  animation: left-to-right-fade-in 1s ease-in;
  -webkit-mask-repeat: no-repeat;
}

@keyframes left-to-right-fade-in {
  0% {
    -webkit-mask-size: 0%;
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    );
  }
  100% {
    -webkit-mask-size: 100%;
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    );
  }
}
<span class="fade-in-text">This is a text that fades in from left to right</span>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接