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>

CSS3实现文字抹开特效

标签：

原文地址：http://www.cnblogs.com/Man-Dream-Necessary/p/5442043.html