CSS实现仿Windows10鼠标照亮边框效果的示例

发布时间:2021-03-19 09:45:17 作者:小新
来源:亿速云 阅读:196

这篇文章主要介绍了CSS实现仿Windows10鼠标照亮边框效果的示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

分析

拿桌面日历中的效果为例,鼠标移动时附近的边框也渐变性可见。这个效果不就是探照灯效果嘛!这个完全可以用 CSS 中的 mask 蒙版配合一个径向渐变实现。

CSS实现仿Windows10鼠标照亮边框效果的示例

但问题是,mask 蒙版是作用于整个元素的,没办法只作用于 border 而不影响内容。这个,那只能把 border 和实际内容分离用不同层来表示了。嗯,鼠标移动就更新蒙版位置,应该不成问题。

实现

准备工作

首先,撸好两层日历格子,一层展示日期信息,一层展示探照灯效果的边框。用 flex 布局也好,grid 也好,哪怕 inline-block 也都是没有问题的,这都不重要,重要的是上下两层的格子一定要对齐,然后我们用 relative 的容器把这两层 absolute 层圈起来,固定住。

<div class="calendar">
    <div class="calendar-header">
        <div class="week-day">一</div>
        <div class="week-day">二</div>
        <div class="week-day">三</div>
        <div class="week-day">四</div>
        <div class="week-day">五</div>
        <div class="week-day">六</div>
        <div class="week-day">日</div>
    </div>
    <div class="calendar-body">
        <div class="grid-container border-layer">
            <div class="grid-item"></div>
            ...
            <div class="grid-item"></div>
        </div>
            <div class="grid-container number-layer">
            <div class="grid-item"><span>28</span><span>十四</span></div>
            <div class="grid-item"><span>29</span><span>十五</span></div>
            ...
            <div class="grid-item"><span>2</span><span>十九</span></div>
        </div>
    </div>
  </div>

层示意图:

CSS实现仿Windows10鼠标照亮边框效果的示例

效果就是这样了:

CSS实现仿Windows10鼠标照亮边框效果的示例

鼠标没有放上去的时候,先把 border 层隐藏掉。

.border-layer {
 ...
  visibility: hidden;
}

.calendar:hover .border-layer {
  visibility: visible;
}

CSS Mask

CSS Mask 类似于 Photoshop 中的图层蒙版,可以使用一张图作为蒙版用作在目标元素上,图片的 alpha 通道(也就是透明度信息)决定了目标元素哪部分可见(也可以选择使用亮度信息)。

举个例子,如果蒙版图片是一张半透明图,则作用到实际元素上效果和设置 opacity: 0.5 效果一样;如果蒙版图片是一张中间镂空的五角星,则效果就是元素被裁剪成五角星形状。

Mask 的语法和 background 的语法几乎完全一致,这里我们用径向渐变创建一个半径 80px 从中心白色到边缘透明的渐变圆,配合 mask-repeat 和 mask-size 防止 repeat 和变形。

-webkit-mask-image: radial-gradient(circle at center, white 0%, transparent 80px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 160px 160px; /* 半径80px 所以 size 需要是 160px */

接下来我们来更新 mask-position 。这里有两个点要注意,一是获取鼠标对目标元素的相对坐标,一是 position 偏移。

MouseEvent 中有一堆的 X/Y,我们用相对 document 的坐标 pageX/pageY,减去目标元素相对 document 的坐标,就能得到我们需要的坐标了。 向量公式: AB = AC - BC

CSS实现仿Windows10鼠标照亮边框效果的示例

不过,这里 mask-position 的坐标还需要处理一下。我们定义的 mask 是一张 160x160 的圆形渐变,而 mask-position 和 background-position 一样,定义的是蒙层左上角 (0,0) 的位置实际需要和容器的哪个坐标对齐。因此我们需要把计算得到的坐标再减去 (80, 80) 才能让渐变中心和鼠标的坐标保持一致。

var borderLayer = document.querySelector(".border-layer");

document.querySelector(".calendar").addEventListener("mousemove", function(ev){
  var x = ev.pageX;
  var y = ev.pageY;
  var bounding = borderLayer.getBoundingClientRect();
  
  borderLayer.style.webkitMaskPosition = `${x - bounding.x - 80}px ${y -bounding.y - 80}px`;
});

感谢你能够认真阅读完这篇文章,希望小编分享的“CSS实现仿Windows10鼠标照亮边框效果的示例”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. CSS中怎么实现多重边框效果
  2. CSS实现鼠标跟随效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css windows10

上一篇:css中怎么实现文字颜色渐变

下一篇:怎么用css实现正方形div

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》