采用css实现流动的边框
问题起缘一个曾经做过的项目, 类似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);
};
}
采用css实现流动的边框的更多相关文章
- 纯css竟可以做出边框这样长宽度的过渡效果
边框效果如下:鼠标移到下面方形,就有效果 要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...
- CSS 关于文本 背景 边框整理
文本与字体 1)阴影:text-shadow 格式:text-shadow:5px 5px 3px #FFFFFF分别对应 水平方向 垂直方向 模糊程度 颜色值 代码: <!DOCTYPE ht ...
- CSS实现列表li边框重合问题
CSS实现列表li边框重合问题 2017年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 <img ...
- CSS黄金三段--消除边框的影响
以前常常因为padding.margin等影响了整个边框的大小,只能傻傻的算大小.现在的黄金三段真的是帮了大忙了,下面的代码放在CSS相应的内容中,就可以使得边框的大小就是你设置的width的属性值. ...
- CSS实现无外边框列表效果
方法一:使用外层容器切割 给每一个 li 设定右边框和下边框线 把ul放置在一个外层div中,设定div的宽高,通过overflow:hidden将一部分li的边框隐藏 此方法只需要计算父容器的宽高, ...
- 各种CSS样式设置细线边框
基础知识回顾 : cellspacing:单元格与单元格之间的边距:cellpadding:单元格内的内容与单元格边沿的边距 简单实用的样式,设置所有的单元格为细线效果 <style type= ...
随机推荐
- 一次Redis的使用Bug记录(exec)
博主在一次项目中,使用了工具类中的Redis类,因为该Redis没有封装管道pipeline和exec命令,所以就大笔一挥来了一段__call; 代码如下(其中$this->_connect() ...
- php中序列化与反序列化
解析PHP多种序列化与反序列化的方法 序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更 ...
- C#中的继承
按照我个人的理解,继承和实现接口不是一个概念,结构和类型都可以实现接口,枚举不能. 话说,结构可以继承吗? 先梳理一下C#中的继承关系,如下图: class => [BaseClass => ...
- 通过创建临时表合并hive小文件
#!/bin/bash #set -x DB=$1 #获取hive表定义 ret=$(hive -e "use ${DB};show tables;"|grep -v _es|gr ...
- 用直接路径(direct-path)insert提升性能的两种方法
1.传统串行insert方式 常见的insert方式有两种: (1) insert into table_name values(....) (2) insert into target_table ...
- robocopy 命令小结
robocopy "C:\dira" "J:\dira" /E /COPYALL /XJ /XD "C:\dira\dir1" " ...
- Druid 基础使用-操作篇(Pivot、plyql)
一.Pivot --9095 端口 二.基本sql 使用 .plysql-- http://plywood.imply.io/plyql (下面的端口应该是8082,我这个地方做了端口转换) ...
- 无需Try catch 的UI事件封装类
在UI处理中,经常需要进行异常处理,以便在错误发生时能够进行一些自定义的操作,比如,弹出消息框给用户,进行重试操作,记录日志等,如果能够让用户写代码时不用写try...catch,而只是关注业务逻辑的 ...
- APNS 服务推送通知
1. 将app注册notification里面, 并从APNS上获取测试机的deviceToken. - (BOOL)application:(UIApplication *)application ...
- Hash函数及其应用
本文部分内容摘自网络,参考资料链接会在文后给出,在此感谢原作者的分享. 计算理论中,没有Hash函数的说法,只有单向函数的说法.所谓的单向函数,是一个复杂的定义,大家可以去看计算理论或者密码学方面的数 ...