logo of Shuibaco

滑动的背景

2017. / 714字 / 740阅 / 0评

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

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

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

更多

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

参考文章

1,023°
Click to load Disqus
Comments
Write a Comment
点击加载Disqus