使用css borer实现图层蒙版效果

需要js

思路：假设目标元素是target。在外层定义元素宽高等于target，通过border设置元素铺满整个文档，设置border的透明图，实现蒙版，在元素的内部设置子元素，宽高100%;设置圆角边框50%；设置box-shadow inset显示

代码：

<span class="demo3">我的信息</span>

<div class="cover"></div>

css

.cover{

            position:absolute;

            border: 0 solid #000;

            left:;

            top:;

            right:;

            bottom:;

            opacity: 0.75;

            overflow: hidden;

            display: none;//防止页面闪现大圆，在设置完元素的样式之后再显示

        }

        .cover::before{

            content:"";

            width:100%;

            position: absolute;

            height:100%;

            -webkit-border-radius: 50%;

            -moz-border-radius: 50%;

            border-radius: 50%;

            border:400px solid #000;

            left:-400px;

            top:-400px;

            box-shadow: 0 0 0 100px #000;

        }

js代码：

$(document).ready(function(){

        var w_w=$(document).width();//获取文档的宽度

        var w_h=$(document).height();//获取文档的高度

        var s_l=$(document).scrollLeft();//获取窗口左边滚动的距离

        var s_t=$(document).scrollTop();//获取窗口顶部滚动的距离

        var t_w=$(".demo3").width();//获取目标元素的宽度

        var t_h=$(".demo3").height();//获取目标元素的高度

        var o_l=$(".demo3").offset().left;//获取目标元素相对于当前窗口左边的距离

        var o_t=$(".demo3").offset().top;//获取目标元素距离当前窗口上部的距离
//设置蒙版元素的border

        $(".cover").show().css({"width":t_w+"px","height":t_h+"px","border-top-width":s_t+o_t+"px","border-right-width":(w_w-o_l-s_l-t_w)+"px","border-bottom-width":(w_h-s_t-o_t-t_h)+"px","border-left-width":o_l+s_l+"px"});

    //border-top-width：目标元素距离当前窗口上部的距离+窗口顶部滚动的距离

 //border-right-width：文档的宽度-目标元素距离当前窗口左边的距离-窗口左边滚动的距离-目标元素的宽度

 //border-bottom-width：文档的高度-目标元素距离当前窗口上部的距离-窗口顶部滚动的距离-目标元素的高度

 //border-left-width：目标元素距离当前窗口左边的距离+窗口左边滚动的距离

});

来自：http://www.zhangxinxu.com/wordpress/2016/03/better-black-mask-guide-overlay-method/

巴特西

使用css borer实现图层蒙版效果

最新文章

热门文章