有没有办法让元素(至少只是文本)从左到右淡入淡出,反之亦然,只使用 CSS?
这是我的意思的一个例子:
实际上,如果它需要 jQuery,我也会接受它,只是作为第二优先级。
有没有办法让元素(至少只是文本)从左到右淡入淡出,反之亦然,只使用 CSS?
这是我的意思的一个例子:
实际上,如果它需要 jQuery,我也会接受它,只是作为第二优先级。
是的,您可以使用 CSS3 动画来实现(在此处查看浏览器支持)。
这是 text-fading 的简单演示。
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 后备。
在 Photoshop 或其他图像编辑软件中,创建一个中间透明的圆形区域,四周逐渐淡出为纯白色。根据需要随意裁剪顶部/底部。然后,您可以使用 css 过渡从左到右为图形设置动画,以实现演示中的效果。对于像 IE 这样不支持过渡的浏览器,可以使用 jquery 中的 cssHooks 功能来使用 jQuery 执行动画。
您可以使用 css 渐变创建此效果,但您会遇到浏览器支持问题,并且在 css 渐变上使用过渡在性能方面非常糟糕。但是,简单地为 png24 设置动画非常容易,并且可以产生相同的效果。
我找到了一个包含多个文本动画的插件。
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>
希望这对其他人有帮助。干杯。