Web开发:四角线框效果(HTML、CSS、JavaScript)

目录

一、实现效果

二、完整代码

三、页面准备

1、页面结构

2、初始样式

3、现有效果

三、线框实现

1、需求分析

2、线框结构

3、线框大小

4、线框位置

5、线框样式

6、移动线框

7、添加过渡效果

8、使用CSS变量


一、实现效果

如下图所示,当鼠标移动到某个图片时,就给这个图片添加四角线框;

四角线框效果

二、完整代码

test.html

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四角线框效果</title>
    <style>
        :root {
            /* 定义变量 */

            /* 图片的宽度 */
            --img-width: 240px;
            /* 图片的高度 */
            --img-height: 160px;
            /* 图片的间距 */
            --img-gap: 40px;

            /* 线框的样式 */
            --line-box-border: 2px solid #666;
        }

        * {
            /* 清除默认边距 */
            margin: 0;
            padding: 0;
        }

        body {
            /* 设为flex布局 */
            display: flex;
            /* 设置子元素水平居中 */
            justify-content: center;
            /* 设置子元素垂直居中 */
            align-items: center;
            width: 100vw;
            height: 100vh;
            background-color: #eeffff;
            caret-color: transparent;
        }

        .grid-container {
            /* 设为相对定位 */
            position: relative;
            /* 设为Grid布局 */
            display: grid;
            /* 划分3列,列宽为240px */
            grid-template-columns: repeat(3, var(--img-width));
            /* 划分3行,行高为160px */
            grid-template-rows: repeat(3, var(--img-height));
            /* 元素间距为40px */
            gap: var(--img-gap);

        }

        .one-img {
            /* 图片大小为其父元素大小 240px * 160px */
            width: 100%;
            height: 100%;

            box-shadow: 0 0 6px 1px #666;
            border-radius: 6px;
        }

        .line-box {
            /* 设置线框为绝对定位 */
            position: absolute;
            /* 距离父元素的上、左距离为0; */
            top: 0;
            left: 0;
            /* 线框盒子的宽度为图片宽度(240px) +  图片的间距(40px) */
            width: calc(var(--img-width) + var(--img-gap));
            /* 线框盒子的高度为图片高度(160px) +  图片的间距(40px) */
            height: calc(var(--img-height) + var(--img-gap));

            /* 设置线框的margin值 */
            margin-top: calc(-1 * var(--img-gap) / 2);
            margin-left: calc(-1 * var(--img-gap) / 2);

            /* 添加过渡效果 */
            transition: top 0.4s, left 0.4s;
        }

        .line-item {
            /* 四角边框采用绝对定位 */
            position: absolute;
            /* 盒子的宽高均为20px */
            width: calc(var(--img-gap) / 2);
            height: calc(var(--img-gap) / 2);
        }

        /* 左上角的线框 */
        .line-item:nth-child(1) {
            top: 0;
            left: 0;
            border-top: var(--line-box-border);
            border-left: var(--line-box-border);
        }

        /* 右上角的线框 */
        .line-item:nth-child(2) {
            top: 0;
            right: 0;
            border-top: var(--line-box-border);
            border-right: var(--line-box-border);
        }

        /* 左下角的线框 */
        .line-item:nth-child(3) {
            bottom: 0;
            left: 0;
            border-bottom: var(--line-box-border);
            border-left: var(--line-box-border);
        }

        /* 右下角的线框 */
        .line-item:nth-child(4) {
            right: 0;
            bottom: 0;
            border-bottom: var(--line-box-border);
            border-right: var(--line-box-border);
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_1.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_2.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_3.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_4.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_5.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_6.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_7.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_8.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_9.jpg" alt="">
        </div>
        <div class="line-box">
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
        </div>
    </div>
</body>
<script>
    // 获取图片元素列表
    var itemList = document.querySelectorAll(".grid-item");
    // 获取线框盒子
    var lineBox = document.querySelector(".line-box");
    itemList.forEach(item => {
        // 给每个图片注册鼠标进入事件
        item.addEventListener("mouseenter", function () {
            // 获取图片的左、上边距(距离父元素),并赋值给线框作为left、top值
            lineBox.style.top = item.offsetTop + 'px';
            lineBox.style.left = item.offsetLeft + 'px';
        })
    });
</script>

</html>

三、页面准备

1、页面结构

(1)结构分析

根据上述效果图,可知:

  • 页面中有一个大容器,在其父容器中水平垂直居中
  • 容器中排列了三行三列,总共9个元素;
  • 每个元素中放一张图片;

(2)结构代码

  • 页面中添加一个Grid布局容器【.grid-container 】和9个Grid元素【.grid-item】;
  • 每个Grid元素中添加一个img元素【.one-img】,用来展示图片;
html 复制代码
<body>
    <div class="grid-container">
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_1.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_2.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_3.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_4.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_5.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_6.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_7.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_8.jpg" alt="">
        </div>
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_9.jpg" alt="">
        </div>
    </div>
</body>

2、初始样式

(1)样式分析

根据上述效果图,可知:

  • Grid容器【.grid-container 】中的9个Grid元素【.grid-item 】,呈现【3行3列】的排列方式;
  • 设置body为Flex布局,使Grid容器在页面中水平垂直居中显示;
  • img元素的大小为父容器Grid元素【.grid-item】的大小;

(2)样式代码

css 复制代码
<style>
    * {
        /* 清除默认边距 */
        margin: 0;
        padding: 0;
    }

    body {
        /* 设为flex布局 */
        display: flex;
        /* 设置子元素水平居中 */
        justify-content: center;
        /* 设置子元素垂直居中 */
        align-items: center;
        width: 100vw;
        height: 100vh;
        background-color: #eeffff;
        caret-color: transparent;
    }

    .grid-container {
        /* 设为Grid布局 */
        display: grid;
        /* 划分3列,列宽为240px */
        grid-template-columns: repeat(3, 240px);
        /* 划分3行,行高为160px */
        grid-template-rows: repeat(3, 160px);
        /* 元素间距为40px */
        gap: 40px;

    }

    .one-img {
        /* 图片大小为其父元素大小 240px * 160px */
        width: 100%;
        height: 100%;

        box-shadow: 0 0 6px 1px #666;
        border-radius: 6px;
    }
</style>

3、基本效果

三、线框实现

1、需求分析

对于上述图中的线框效果,实现步骤如下:

(1)准备线框盒子

需要准备一个盒子【.line-box】,这个盒子要比图片大,包裹住图片,如下图所示:

(2)添加四角小盒子

但是效果图中的边框只在四角出现,这个盒子显然不能实现这样的效果;

这里采用的办法是,给这个线框盒子的四角分别添加一个小盒子【.line-item】,如下图所示:

(3)边框调整

到这里,基本上已经很明显了,只需要去除线框盒子【.line-box 】的边框效果,再给四角小盒子【.line-item】分别添加上对应位置的边框,就可以实现了;

注意:线框效果的实现方式有很多,这里仅介绍这种简单粗暴的实现方式;

( 如果有其他更好的实现方式,还希望请各位大佬不吝赐教~!)

2、线框结构

根据上述分析可知:

  • 线框盒子的位置是相对与Grid容器【.grid-container】的;
  • 在Grid容器中添加一个div盒子【.line-box】,与9个图片盒子同级;
  • 在【.line-box 】盒子中添加四角小盒子【.line-item】* 4;

注意:这里将线框添加到Grid容器【.grid-container】中,是为了给后续线框的定位做准备;

html 复制代码
<body>
    <div class="grid-container">
        <div class="grid-item">
            <img class="one-img" src="D:\\test\\zyl-img\\bg_1.jpg" alt="">
        </div>
        ......
        <div class="line-box">
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
        </div>
    </div>
</body>

3、线框大小

如何确定线框的大小?

分析效果图可知:它的位置如下图红色框所示:

  • 线框的宽度 = 图片的宽度(240px) + 两图的间距(40px);(左右间距各一半)
  • 线框的高度 = 图片的高度(160px) + 两图的间距(40px);(上下间距各一半)

4、线框位置

如何确定线框位置?

分析效果图可知:

  • 首先,线框需要采用绝对定位,相对其父元素【.grid-container】(脱离标准流,覆盖在图片上);
  • 其次,当线框出现在第一个图片之上时,很明显不能和和它的父元素【.grid-container】的上边界和左边界贴合;

如下图所示,这并不是想要的结果:

这里采用的方式是给线框【.line-box】一个负的margin值(当然也可以采用其他方式);

这样一来,线框中心就会与图片中心重合,在视觉上达到需要的效果,如下图所示:

5、线框样式

根据上述分析可知:

  • 线框【.line-box 】采用绝对定位:position: absolute;
  • 父元素【.grid-container 】采用相对定位:position: relative;
  • 线框距离父元素的左、上距离均为0(线框的初始位置);
  • 线框设置负的margin值:margin-top: -20px; margin-left: -20px;
  • 四角盒子采用绝对定位,相对于父元素线框【.line-box 】:position: absolute;
  • 四角盒子大小为图片间距(40px)的一半:width: 20px; height: 20px;
  • 分别给每个顶角盒子单独设置位置和样式;

相关元素的样式代码如下:

css 复制代码
<style>
    ......
    .grid-container {
        /* 设为相对定位 */
        position: relative;
        ......

    }

    .line-box {
        /* 设置线框为绝对定位 */
        position: absolute;
        /* 距离父元素的上、左距离为0; */
        top: 0;
        left: 0;

        /* 线框盒子的宽度为图片宽度(240px) +  图片的间距(40px) */
        width: 280px;
        /* 线框盒子的高度为图片高度(160px) +  图片的间距(40px) */
        height: 200px;

        /* 设置线框的margin值 */
        margin-top: -20px;
        margin-left: -20px;
    }

    .line-item {
        /* 四角边框采用绝对定位 */
        position: absolute;
        /* 盒子的宽高均为20px */
        width: 20px;
        height: 20px;
    }

    /* 左上角的线框 */
    .line-item:nth-child(1) {
        top: 0;
        left: 0;
        border-top: 2px solid red;
        border-left: 2px solid red;
    }

    /* 右上角的线框 */
    .line-item:nth-child(2) {
        top: 0;
        right: 0;
        border-top: 2px solid red;
        border-right: 2px solid red;
    }

    /* 左下角的线框 */
    .line-item:nth-child(3) {
        bottom: 0;
        left: 0;
        border-bottom: 2px solid red;
        border-left: 2px solid red;
    }

    /* 右下角的线框 */
    .line-item:nth-child(4) {
        right: 0;
        bottom: 0;
        border-bottom: 2px solid red;
        border-right: 2px solid red;
    }
</style>

效果如下图所示:

6、移动线框

分析需求可知:

  • 当鼠标移入某个图片时,将线框移动到该图片周围;
  • 分别给每个图片盒子注册鼠标进入事件;
  • 当鼠标进入该图片时,计算其到父盒子【.grid-container】的上边距和左边距,并赋值给线框作为top和left值;
javascript 复制代码
<script>
    // 获取图片元素列表
    var itemList = document.querySelectorAll(".grid-item");
    // 获取线框盒子
    var lineBox = document.querySelector(".line-box");
    itemList.forEach(item => {
        // 给每个图片注册鼠标进入事件
        item.addEventListener("mouseenter", function () {
            // 获取图片的左、上边距(距离父元素),并赋值给线框作为left、top值
            lineBox.style.top = item.offsetTop + 'px';
            lineBox.style.left = item.offsetLeft + 'px';
        })
    });
</script>

7、添加过渡效果

可以给线框添加过渡效果,让它的移动看起来平滑一点;

css 复制代码
.line-box {
    ......
    /* 添加过渡效果 */
    transition: top 0.4s, left 0.4s;
}

8、使用CSS变量

上述代码中,很多地方都使用了同样的属性值;例如,

  • 顶角盒子边框样式;
  • 根据图片大小和间距计算的线框大小和位置等;

这些内容均可以通过CSS中的变量来实现;具体可以这样修改:

css 复制代码
<style>
    :root{
        /* 定义变量 */

        /* 图片的宽度 */
        --img-width:240px;
        /* 图片的高度 */
        --img-height:160px;
        /* 图片的间距 */
        --img-gap:40px;

        /* 线框的样式 */
        --line-box-border: 2px solid red;
    }
    
    ......

    .grid-container {
        ......
        /* 划分3列,列宽为240px */
        grid-template-columns: repeat(3, var(--img-width));
        /* 划分3行,行高为160px */
        grid-template-rows: repeat(3, var(--img-height));
        /* 元素间距为40px */
        gap: var(--img-gap);
    }

    .line-box {
        ......
        /* 线框盒子的宽度为图片宽度(240px) +  图片的间距(40px) */
        width: calc(var(--img-width) + var(--img-gap));
        /* 线框盒子的高度为图片高度(160px) +  图片的间距(40px) */
        height: calc(var(--img-height) + var(--img-gap));

        /* 设置线框的margin值 */
        margin-top: calc(-1 * var(--img-gap) / 2);
        margin-left: calc(-1 * var(--img-gap) / 2);
        ......
    }

    .line-item {
        ......
        /* 盒子的宽高均为20px */
        width: calc(var(--img-gap) / 2);
        height: calc(var(--img-gap) / 2);
    }

    /* 左上角的线框 */
    .line-item:nth-child(1) {
        ......
        border-top: var(--line-box-border);
        border-left:var(--line-box-border);
    }

    /* 右上角的线框 */
    .line-item:nth-child(2) {
        ......
        border-top: var(--line-box-border);
        border-right: var(--line-box-border);
    }

    /* 左下角的线框 */
    .line-item:nth-child(3) {
        ......
        border-bottom: var(--line-box-border);
        border-left: var(--line-box-border);
    }

    /* 右下角的线框 */
    .line-item:nth-child(4) {
        ......
        border-bottom: var(--line-box-border);
        border-right: var(--line-box-border);
    }
</style>

这样一来,如果需要更改图片大小、间距,线框大小、位置、样式等,直接在变量声明的地方统一更改即可,不需要再多做修改;

=========================================================================

每天进步一点点~!

记录一下这个有意思的CSS效果~~!

相关推荐
风尚云网23 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020425 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
endingCode44 分钟前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
佚先森1 小时前
2024ARM网络验证 支持一键云注入引流弹窗注册机 一键脱壳APP加固搭建程序源码及教程
java·html
Myli_ing2 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
I_Am_Me_2 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁3 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜3 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript