CSS3实现文字抹开特效

CSS:

.column-title {

color: #9b9b9b;

text-shadow: 1px 1px #d4d4d4;

}

.column-title:hover {

color: #5a5a5a;

text-shadow: none;

}

@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {

.column-title-hover:hover {

padding: .5em 0;

border-top: solid 1px #868686;

border-bottom: solid 1px #868686;

border-radius: 2px;

background-image: -webkit-linear-gradient(left, #f0f0f0, #363636 100%);

-webkit-text-fill-color: transparent;

-webkit-background-clip: text;

-webkit-background-size: 200% 100%;

-webkit-animation: column-title-hover-animation 3s infinite linear;

}

@-webkit-keyframes column-title-hover-animation {

0% {

background-position: 0 0;

}

100% {

background-position: -100% 0;

}

}

}

HTML:

<h2 class="column-title"><font class="column-title-hover">阡陌千灯 万叶飞花</font></h2>