湖南省建设信息网站查询,网站建设经济成本分析,企业网站建设费用预算,互联网App网站建设方案目录
一、实现效果
二、完整代码
三、页面准备
1、页面结构
2、初始样式
3、现有效果
三、线框实现
1、需求分析
2、线框结构
3、线框大小
4、线框位置
5、线框样式
6、移动线框
7、添加过渡效果
8、使用CSS变量 一、实现效果
如下图所示#xff0c;当鼠标移动…目录
一、实现效果
二、完整代码
三、页面准备
1、页面结构
2、初始样式
3、现有效果
三、线框实现
1、需求分析
2、线框结构
3、线框大小
4、线框位置
5、线框样式
6、移动线框
7、添加过渡效果
8、使用CSS变量 一、实现效果
如下图所示当鼠标移动到某个图片时就给这个图片添加四角线框 四角线框效果 二、完整代码
【test.html】
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title四角线框效果/titlestyle: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
/headbodydiv classgrid-containerdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_1.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_2.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_3.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_4.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_5.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_6.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_7.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_8.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_9.jpg alt/divdiv classline-boxdiv classline-item/divdiv classline-item/divdiv classline-item/divdiv classline-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】用来展示图片
bodydiv classgrid-containerdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_1.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_2.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_3.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_4.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_5.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_6.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_7.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_8.jpg alt/divdiv classgrid-itemimg classone-img srcD:\\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样式代码
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】中是为了给后续线框的定位做准备
bodydiv classgrid-containerdiv classgrid-itemimg classone-img srcD:\\test\\zyl-img\\bg_1.jpg alt/div......div classline-boxdiv classline-item/divdiv classline-item/divdiv classline-item/divdiv classline-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;分别给每个顶角盒子单独设置位置和样式
相关元素的样式代码如下
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值
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、添加过渡效果
可以给线框添加过渡效果让它的移动看起来平滑一点
.line-box {....../* 添加过渡效果 */transition: top 0.4s, left 0.4s;
}
8、使用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效果~~
