javascript – CSS从左到右渐变

这是一个简单的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后备版本.