怎么用CSS实现仿Windows10鼠标照亮边框效果

技术怎么用CSS实现仿Windows10鼠标照亮边框效果这篇文章主要讲解了“怎么用CSS实现仿Windows10鼠标照亮边框效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学

本文主要讲解“如何用CSS实现模仿Windows10鼠标照亮边框的效果”。本文的解释简单明了,易学易懂。现在请跟随边肖的思路学习学习“如何用CSS实现模仿Windows10鼠标照亮边框的效果”!

00-1010以桌面日历中的效果为例。当鼠标移动时,它附近的边框也逐渐可见。这个效果就是探照灯效果!这可以通过在CSS中使用带有径向渐变的遮罩来实现。

怎么用CSS实现仿Windows10鼠标照亮边框效果

但问题是蒙版蒙版是应用到整个元素的,所以不能只应用到边框而不影响内容。这个,那个只能通过把边框和实际内容分在不同的层来表达。嗯,鼠标移动时更新蒙版位置应该不成问题。

00-1010

分析

首先设置两层日历网格,一层显示日期信息,另一层显示探照灯效果边框。Flex布局或网格布局都可以,即使是内嵌块也可以。没关系。重要的是上下网格必须对齐,然后我们用相对容器圈出两个绝对层并固定它们。

divclass='日历'

divclass='日历-标题'

Divclass='周-日' I /div

Divclass='周-日' II /div

Divclass='周-日'三/div

Divclass='周-日'四/div

Divclass='周-日'五/div

Divclass='周-日'六/div

Divclass='周-日'天/div

/div

divclass='日历-正文'

div class=' grid-container order-layer '

divclass='grid-item'/div

.

divclass='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鼠标照亮边框效果”的内容了,经过本文的学习后,相信大家对怎么用CSS实现仿Windows10鼠标照亮边框效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/73038.html

(0)

相关推荐

  • postgresql中用户安全配置的示例分析

    技术postgresql中用户安全配置的示例分析小编给大家分享一下postgresql中用户安全配置的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起

    攻略 2021年11月18日
  • 双指针技巧总结

    技术双指针技巧总结 双指针技巧总结https://labuladong.gitee.io/algo/2/21/53/读完本文,你不仅学会了算法套路,还可以顺便去 LeetCode 上拿下如下题目:
    14

    礼包 2021年11月12日
  • 如何使用php实现EOS离线签名交易

    技术如何使用php实现EOS离线签名交易这篇文章给大家分享的是有关如何使用php实现EOS离线签名交易的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。EOS区块链的钱包服务器Keosd,提供了s

    攻略 2021年11月25日
  • caffe如何安装

    技术caffe如何安装这篇文章主要介绍了caffe如何安装,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。系统及工具包win10visual studio

    攻略 2021年11月25日
  • 解决texlive化学式转换镜像经常偶发性进程堆积导致卡顿问题

    技术解决texlive化学式转换镜像经常偶发性进程堆积导致卡顿问题 解决texlive化学式转换镜像经常偶发性进程堆积导致卡顿问题前言
    之前在 使用Python定时清理运行超时的pdflatex僵尸进程

    礼包 2021年12月2日
  • 生成JSON元数据对象的示例分析

    技术生成JSON元数据对象的示例分析生成JSON元数据对象的示例分析,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。数据验证是生成 JSON应用程序中最富

    攻略 2021年11月25日