网页特效,显示滑动块位置的内容,隐藏其他位置的内容

要实现的效果:
有一个框,这个框移动到哪,就显示这个地方的内容,其他地方的隐藏。

有什么好的实现思路。

阅读 603
评论
    4 个回答
    • 5.3k

    一个div,给他一个足够大的border或者box-shadow,或者 outline均可

    .box{
        width:100px;
        height:100px;
        outline:1000px solid #000
    }

    这样就形成的中间是镂空的,其他地方都是黑色的

      刚想的一个、最简单的一种,通过 背景色、字体颜色、元素层级关系 模拟实现

       <div style="**background-color: black**;height: 2em;" >
            <div id="text" style="display: inline-block;color: black;position: relative;height: 2em;z-index: 2;">
            DJHKDKDJDKDJLKDJDDKJD
            </div>
            <div  id="cover" style="left:15px;background-color: #FFFFFF;display: inline-block;position: absolute;height: 2em;width:2em;z-index: 1;"></div>
       </div>
        • 12.4k

        想到两个方案:

        1. 用4个 <div> 覆盖到页面上,中间露出一个洞,根据你想要的位置调整。
        2. clip-path 属性实现
          • 18.3k

          看上去的确可行,也没有什么兼容问题。
          border需要移动的时候减去位置
          outline倒是不需要减去上左边距

          clipboard.png

            撰写回答

            登录后参与交流、获取后续更新提醒

            相似问题
            推荐文章