html中div动态边框,[实践总结]纯css实现动态边框
这几天工作中遇到一个交互需求,要求实现一个效果,当鼠标移入一个元素的时候,元素出现一个动态的边框,如图:
动态边框
思路
看到这个效果,我首先想到的是设置元素的border属性,可惜border不能设置长度,无法实现动效。另外一种实现思路是添加四个div来分别实现上下左右的边框效果,虽然可行,但是要添加四个额外元素,有点儿得不偿失的感觉。难道就没有更好的解决方案了...
就在我绞尽脑汁的时候,灵光乍现,为什么不尝试一下用CSS3多背景来模拟边框呢,背景是可以设置长度的,通过修改背景的长度,就可以实现要求的动效。说干就干,赶快从网上搜索一下CSS3背景的相关知识。
CSS3 Background
CSS3对于 background 做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。
1、 多个背景图片
在CSS3里面,你可以在一个标签元素里应用多个背景图片。代码类似与CSS2.0版本的写法,但引用图片之间需用“,”逗号隔开。第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下:
background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
复制代码
2、新属性:Background Clip
background-clip 顾名思义,背景剪切,用来设置元素的背景(背景图片或颜色)是否延伸到边框下面。
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
3、新属性: Background Origin
此属性需要与 background-position 配合使用。你可以用 background-position 计算定位是从border,padding或content boxes内容区域算起。(类似 background-clip )
注意:当使用 background-attachment 为fixed时,该属性将被忽略不起作用。
background-origin:border-box; 从border边框位置算起
background-origin:padding-box; 从padding位置算起
background-origin:content-box; 从content-box内容区域位置算起;
4、新属性:Background Size
Background Size属性用来设置背景图片的大小。有几个属性值:
background-size: contain;
background-size: cover;
background-size: 100px 100px;
background-size: 50% 100%;
5、Background Repeat 调整
CSS2里当设置背景的时候,它经常被标签元素截取而显示不全,CSS3介绍了2个新属性来修复此问题。
background-repeat: space;
background-repeat: round;
6、Background Attachment 的调整
Background Attachment有了一个新属性值: local ,当标签元素滚动时它才有效(如设置 overflow: scroll; ),当 background-attachment 设置为 scroll 时,背景图片是不随内容滚条滚动的。现在,有了 background-attachment: local ,就可以做到让背景随元素内容滚动而滚动了。
7、新增 Background Blend Mode背景的混合模式是当背景重叠时计算像素最终色值的方法,每种混合模式采用前景和背景颜色值(分别为顶部颜色和底部颜色),执行其计算并返回颜色值。最终的可见层是对混合层中的每个重叠像素执行混合模式计算的结果。 background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;
CSS3 多背景模拟元素边框
我们这里主要使用了 background-img 、 background-size 和 background-position 三个属性。
background-image: [background-image], [background-image], [background-image];
background-position: [background-position], [background-position], [background-position];
background-repeat: [background-repeat], [background-repeat], [background-repeat];
复制代码
简写形式如下:
background: [background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat];
复制代码
现在我们用多背景来模拟一个元素的边框
/*CSS*/
.exammple {
background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
background-position: left top, right top, right bottom, left bottom;
}
复制代码
复制代码
我们用四个渐变的背景来模拟四个边框(为什么我们要用渐变而不是直接的Color呢?这是由于CSS的多背景只能是 background-image , background-color 不支持多个值,所有即便是纯色的边框,我们也只能使用渐变)。
初步效果
接下来我们让边框动起来
/*CSS*/
.exammple {
transition: ease-in .3s;
background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
background-size: 0 2px, 2px 0, 0 2px, 2px 0;
background-position: left top, right top, right bottom, left bottom;
}
.exammple:hover {
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}
复制代码
现在我们已经按要求实现了交互效果。
总结
相比border属性,用background的模拟边框存在以下的优势和劣势
优势
劣势
可以控制宽高,渐变色,运动方向等,灵活多变,能实现很多border不能实现的效果,并且不用添加额外的元素
不能实现border圆角
需要注意的是 background模拟的边框不等同于真正的边框,是不占用边框的宽高的,计算盒子模型时要留心
最后
由于CSS3对背景属性的进一步丰富,利用CSS3的多背景可以实现很多以前必须借助js或图片才能实现的效果,比如半透明背景、几何图案背景、条纹背景等,期待和大家一块儿去探索CSS的奥秘。
关于我们
快狗打车前端团队专注前端技术分享,定期推送高质量文章,欢迎关注点赞。
html中div动态边框,[实践总结]纯css实现动态边框相关推荐
- html边框闪烁代码,纯css实现动态边框的示例代码
背景 这几天工作中遇到一个交互需求,要求实现一个效果,当鼠标移入一个元素的时候,元素出现一个动态的边框,如图: 动态边框 思路 看到这个效果,我首先想到的是设置元素的border属性,可惜border ...
- before css 旋转_单标签!纯CSS实现动态晴阴雨雪
引言 本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码: <div c ...
- 纯CSS实现动态晴阴雨雪
1 引言 本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码: <!-- ...
- 单标签实现纯CSS实现动态晴阴雨雪
1 引言 本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码: <!-- ...
- html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
- php动态字体,利用纯CSS实现动态的文字效果实例
相信大家都曾在网站中看到过中效果,一打开页面,无论是文字还是图片,都随着规定时间的而变化,今天我们将介绍如何通过用纯CSS来实现这种效果,下面一起来看看. 大家可能经常会看到酷炫的网站 在这类网站中能 ...
- 有趣的纯CSS实现动态晴阴雨雪
我们先来看看实现的效果吧 非常的美腻,对吧.这个是纯css,且单标签实现的哦~ 先贴完整代码,我们再来看看这个里面究竟有什么可以借鉴的知识点 <!DOCTYPE html> <htm ...
- css单标签,单标签!纯CSS实现动态晴阴雨雪
封面.jpg 1 引言 本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 效果预览.gif 再看 ...
- html如何动态显示天气,纯CSS实现动态的天气图标
单标签!纯CSS实现动态晴阴雨雪 .weather { position: relative; display: inline-block; width: 180px; height: 240px; ...
最新文章
- mysql 存储过程 百万数据 innodb_详解mysql数据库一键查看锁信息(开启InnoDB监控)...
- iOS开发-Runtime详解(简书)
- 浅谈阀控型铅酸蓄电池在数据中心的应用与日常管理
- MySQL事务的可串行化
- STM32之的GPIO推挽输出与开漏输出的区别
- Android的***.sh的开机服务添加
- linux 环境变量_如何管理你的 Linux 环境变量 | Linux 中国
- 融资 6 亿元后,端点科技将致力于类SaaS化软件服务
- 血眼龙王萧沙传-翠花篇
- java 2 swing_Java Swing2 基本登錄框
- java jsp乱码怎么解决_Java/JSP中文乱码问题解决心得
- git通过http的方式下载和提交代码
- 高保真扬声器系统的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告的全球与中国市场
- 乐嘉首档脱口秀《夜问》开播变身“犀利帝”
- Image 图像转化为 PDF 文件
- 领域驱动设计——项目分层与项目落地
- B站带货,如何快速创作B站爆款带货视频?
- 磁盘阵列RAID技术详解
- 32位w7怎么升64位|w7系统32位升级64位教程
- 闲人闲谈PS之六——PS顾问升级树
热门文章
- OPENMV羽毛球识别
- LTP词性与语义表格(简洁版)
- 衡水二中2021清华北大高考成绩查询,衡水中学2020高考成绩多少人考上清华北大...
- (python走过的坑)OpenCV中错误opencv-3.3.1\modules\highgui\src\window.cpp:339: error: (-215) size.width0 ...
- matlab如何仿真斜坡信号,单斜坡ADC的Matlab/Simulink建模问题
- SpringBoot集成Elasticseach
- 实木地板被机器人弄成坑_钱花光哭成泪人,28个让人撕心裂肺装修坑,不注意新房就会被毁!...
- 匿名社交?无秘模式基本宣告失败
- 概率分布 ---- 均匀分布
- android外星人游戏,外星人部队游戏