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>

转载于:https://www.cnblogs.com/Man-Dream-Necessary/p/5442043.html