问题起缘一个曾经做过的项目， 类似excel那样， 选中单元格并复制或粘贴时有个边框流动的效果， like this:
在前端要作出这种效果可能方法并不少， 不过我只想到了2种， 真边框与假边框， 真边框的意思就是说切实的通过css里的border来实现， 另一种就是找替代边框。
实现效果如下：
图1为假边框， 图二为真边框
1. 先说说假边框？ 对， 因为这个在我看来更容易实现， 思路也更清晰。
假设要创建一个 <div id = ‘content‘></div> 带流动的边框， 考虑给content添加一个父节点node: <div id=‘box‘></div>， 结果就是:
<div id=‘box‘> <div id=‘content‘></div> </div>, 给box加下padding: 4px; 给content加个background: white; 给box加上流动的背景就OK， 如此就将
边框转嫁到box的背景上了。那如何设置流动的背景呢？ 用css动画就OK了， 效果图1， 代码如下。
代码：
html:
<div id=‘box‘>
<div
id=‘content‘></div>
</div>
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:
<div id=‘content‘></div>
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);
};
}