有没有办法使用CSS来淡化元素(至少只是文本)进出,从左到右,反之亦然？
这是我的意思的一个例子：
实际上,如果需要jQuery,我也会接受这一点,就像第二个优先事项.
解决方法
是的,你可以使用
CSS3动画(
check browser support here).
这是一个简单的demo for text-fading.
HTML：
<div class="text"> There is some text here! <div class="fadingEffect"></div> </div>
CSS：
.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%;}
}
正如你所看到的,边界有一个鲜明的对比.如果您使用图像渐变而不是纯白色背景,它将呈现更好的效果.
然后,您可以对IE9及以下版本使用jQuery后备版本.