问题起缘一个曾经做过的项目， 类似excel那样， 选中单元格并复制或粘贴时有个边框流动的效果， like this:
在前端要作出这种效果可能方法并不少， 不过我只想到了2种， 真边框与假边框， 真边框的意思就是说切实的通过css里的border来实现， 另一种就是找替代边框。
实现效果如下：
图1为假边框， 图二为真边框
1.先说说假边框？ 对， 因为这个在我看来更容易实现， 思路也更清晰。
假设要创建一个
边框转嫁到box的背景上了。那如何设置流动的背景呢？ 用css动画就OK了， 效果图1， 代码如下。
代码：
html:
css:
#content{
width: 100%;
height: 100%;
background: white
}
#box{
width: 200px;
height: 200px;
padding: 2px;
/* 背景为白黑条纹 */
background:
-webkit-repeating-linear-gradient(
-45deg,
transparent,
transparent 5px,
#000000 5px,
black 10px
);
/*动画 'flow-light' 0.2s 一次， 无限循环*/
-webkit-animation: flow-light .2s infinite linear;
}
@-webkit-keyframes flow-light{
100% {
/* 背景为黑白条纹 */
background:
-webkit-repeating-linear-gradient(
-45deg,
#000000,
#000000 5px,
transparent 5px,
transparent 10px);
};
}
2. 通过第一种实现方式， 不难想到第二种实现方式， 我们只要边框为条纹边框， 并设置动画就OK了， 好在我们有border-image这个属性， 效果如图2， 代码如下
代码：
html:
css:
#content{
width: 200px;
height: 200px;
box-sizing: border-box;
border: 4px transparent;
border-image:
-webkit-repeating-linear-gradient(
-45deg,
transparent,
transparent 5px,
#000000 5px,
black 10px)
10 10 round;
-webkit-animation: border-animation .3s infinite;
}
@-webkit-keyframes border-light{
100% {
/* 背景为黑白条纹 */
border-image:
-webkit-repeating-linear-gradient(
-45deg,
#000000,
#000000 5px,
transparent 5px,
transparent 10px);
};
}
纯css竟可以做出边框这样长宽度的过渡效果
边框效果如下:鼠标移到下面方形,就有效果 要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...
CSS 关于文本 背景 边框整理
文本与字体 1)阴影:text-shadow 格式:text-shadow:5px 5px 3px #FFFFFF分别对应 水平方向 垂直方向 模糊程度 颜色值 代码: ..
CSS实现列表li边框重合问题
CSS实现列表li边框重合问题 04月13日 21:04:18 阅读数:5066 在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图:可以看到每个格子的右边框和 ...
HTML 学习笔记 CSS样式(外边框 外边框合并)
CSS外边距 围绕在元素边框的空白区域就是外边距 设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...
解决CSS移动端1px边框问题
移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. < ...
使用CSS为图片添加边框的几种方法
css的应用十分广泛,即便用在图片的效果中也是方法多样,本文下面就介绍五种为图片添加特殊效果边框的CSS写法阴影效果 通过使用带有一些padding之的背景图来添加阴影效果. HTML
CSS黄金三段--消除边框的影响
以前常常因为padding.margin等影响了整个边框的大小,只能傻傻的算大小.现在的黄金三段真的是帮了大忙了,下面的代码放在CSS相应的内容中,就可以使得边框的大小就是你设置的width的属性值. ...
CSS实现无外边框列表效果
方法一:使用外层容器切割 给每一个 li 设定右边框和下边框线 把ul放置在一个外层div中,设定div的宽高,通过overflow:hidden将一部分li的边框隐藏 此方法只需要计算父容器的宽高, ...
各种CSS样式设置细线边框
基础知识回顾 : cellspacing:单元格与单元格之间的边距:cellpadding:单元格内的内容与单元格边沿的边距 简单实用的样式,设置所有的单元格为细线效果
http请求与响应(content-type)
http请求信息由浏览器把地址栏URL信息和页面(html.jsp.asp)组装成http请求消息体(如下). (请求消息行)(请 ...
旧文备份:CANopen协议PDO的几种传输方式
(于.1.22) 由于PDO所传输的数据内容是无协议的且分配的标识符范围较SDO靠前,因此,其效率和优先级都是较高的,通常用于实时过程数据的传输. PDO是生产/消费类型的通讯方式,数据只有一 ...
MySQL 索引背后的数据结构及算法原理
本文转载自/24006/ 摘要本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引 ...
Swiper说明及API手册说明
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...
hdujava
多项式求和 Time Limit: 2000/1000 MS (Java/Others)Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
qt 工具栏和菜单栏
在前面的QMainWindow的基础之上,我们开始着手建造我们的应用程序.虽然现在已经有一个框架,但是,确切地说我们还一行代码没有写呢!下面的工作就不那么简单了!在这一节里面,我们要为我们的框架添加菜 ...
python select poll epoll的区别
select 优点:为最早的异步io处理模块,他可以再linux上和windows上使用,跨平台兼容性好,而poll和epoll都不能在windows系统环境中使用. 缺点:select的机制决定了他 ...
zabbix 配置SNMP监控
什么是SNMP? 简单网络管理协议(SNMP),由一组网络管理的标准组成,包含一个应用层协议(application layer protocol).数据库模型(database schema)和一组 ...
转：mac 设置root 密码
终端中输:sudo passwd rootpasswd root是修改root的命令,unix下sudo是以当前用户的身份执行root的命令,以避免输入root的密码但是sudo依赖于配置文件/etc ...
Ooui：在浏览器中运行.NET应用 Ooui.Wasm：浏览器中的.NET
在过去数年中,桌面应用开发人员一直处境艰难,因为人们的主要关注点聚焦于Web和移动应用.由于Microsoft未来Windows平台的计划未定,并且UWP应用也没有突破性进展,因此技术落伍的责任也不应 ...
