滑动的背景

主题「墨」的文章标题的悬停效果使用的就是滑动背景，当时从网上找到方法后也没仔细研究到底是为什么，能用就用了。今天在研究滑动的下划线时又回头看了一下，才终于明白其中的逻辑。

滑动背景的实现原理其实不难，核心思想就是改变背景位置，在此基础上加个「特效」，便能实现平滑顺畅的移动了。

HTML

<div class="sliding-bg">
    <a href="#">Hover me</a>
</div>

CSS

.sliding-bg a {
    display: block;
    width: 50%;
    margin: 0 auto;
    background-image: linear-gradient(to right, #eee 50%, transparent 50%); /* 百分比表示起始位置：前半部分是灰色，后半部分是透明色 */
    background-size: 200% 100%; /* 放大至原来的两倍 */
    background-position: 100% 0; /* 从100%处开始，故显示的是后半部分的透明色 */
    transition: 0.5s; /* 平滑过渡效果 */
}
.sliding-bg a:hover {
    background-position: 0 0; /* 从0处开始，故显示的是前半部分的灰色 */
}

可以直接在background-image中引用图片，或者像以上代码所述用linear-gradient构建一个背景图片。这里要说一下其中的巧思：使用百分比设定图片的前半部分和后半部分的颜色，然后通过将图片放大至原来的两倍，配合background-position设定起始位置（100% or 0），以实现背景图片的切换，达到滑动效果。在这里因为前半部分是灰色，后半部分是透明色，故而在背景过渡时，前半部分的灰色便从左边进来，替换了后半部分的透明色。

DEMO

更多

以上只是说明了一种特殊情况，还可以按照这个思路实现比如：从右至左的滑动、更特别的渐变色背景和滑动效果等。

参考文章

• Slide Background Image with CSS | Brad S. Knutson