问题起缘一个曾经做过的项目, 类似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实现流动的边框的更多相关文章

  1. 纯css竟可以做出边框这样长宽度的过渡效果

    边框效果如下:鼠标移到下面方形,就有效果   要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...

  2. CSS 关于文本 背景 边框整理

    文本与字体 1)阴影:text-shadow 格式:text-shadow:5px 5px 3px #FFFFFF分别对应 水平方向 垂直方向 模糊程度 颜色值 代码: <!DOCTYPE ht ...

  3. CSS实现列表li边框重合问题

    CSS实现列表li边框重合问题 2017年04月13日 21:04:18 阅读数:5066 在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图:  可以看到每个格子的右边框和 ...

  4. HTML 学习笔记 CSS样式(外边框 外边框合并)

    CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...

  5. 解决CSS移动端1px边框问题

    移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. < ...

  6. 使用CSS为图片添加边框的几种方法

    css的应用十分广泛,即便用在图片的效果中也是方法多样,本文下面就介绍五种为图片添加特殊效果边框的CSS写法阴影效果 通过使用带有一些padding之的背景图来添加阴影效果. HTML <img ...

  7. CSS黄金三段--消除边框的影响

    以前常常因为padding.margin等影响了整个边框的大小,只能傻傻的算大小.现在的黄金三段真的是帮了大忙了,下面的代码放在CSS相应的内容中,就可以使得边框的大小就是你设置的width的属性值. ...

  8. CSS实现无外边框列表效果

    方法一:使用外层容器切割 给每一个 li 设定右边框和下边框线 把ul放置在一个外层div中,设定div的宽高,通过overflow:hidden将一部分li的边框隐藏 此方法只需要计算父容器的宽高, ...

  9. 各种CSS样式设置细线边框

    基础知识回顾 : cellspacing:单元格与单元格之间的边距:cellpadding:单元格内的内容与单元格边沿的边距 简单实用的样式,设置所有的单元格为细线效果 <style type= ...

随机推荐

  1. 一次Redis的使用Bug记录(exec)

    博主在一次项目中,使用了工具类中的Redis类,因为该Redis没有封装管道pipeline和exec命令,所以就大笔一挥来了一段__call; 代码如下(其中$this->_connect() ...

  2. php中序列化与反序列化

    解析PHP多种序列化与反序列化的方法 序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更 ...

  3. C#中的继承

    按照我个人的理解,继承和实现接口不是一个概念,结构和类型都可以实现接口,枚举不能. 话说,结构可以继承吗? 先梳理一下C#中的继承关系,如下图: class => [BaseClass => ...

  4. 通过创建临时表合并hive小文件

    #!/bin/bash #set -x DB=$1 #获取hive表定义 ret=$(hive -e "use ${DB};show tables;"|grep -v _es|gr ...

  5. 用直接路径(direct-path)insert提升性能的两种方法

    1.传统串行insert方式 常见的insert方式有两种: (1) insert into table_name values(....) (2) insert into target_table ...

  6. robocopy 命令小结

    robocopy "C:\dira" "J:\dira" /E /COPYALL /XJ /XD "C:\dira\dir1" " ...

  7. Druid 基础使用-操作篇(Pivot、plyql)

    一.Pivot  --9095 端口  二.基本sql 使用 .plysql--   http://plywood.imply.io/plyql  (下面的端口应该是8082,我这个地方做了端口转换) ...

  8. 无需Try catch 的UI事件封装类

    在UI处理中,经常需要进行异常处理,以便在错误发生时能够进行一些自定义的操作,比如,弹出消息框给用户,进行重试操作,记录日志等,如果能够让用户写代码时不用写try...catch,而只是关注业务逻辑的 ...

  9. APNS 服务推送通知

    1. 将app注册notification里面, 并从APNS上获取测试机的deviceToken. - (BOOL)application:(UIApplication *)application ...

  10. Hash函数及其应用

    本文部分内容摘自网络,参考资料链接会在文后给出,在此感谢原作者的分享. 计算理论中,没有Hash函数的说法,只有单向函数的说法.所谓的单向函数,是一个复杂的定义,大家可以去看计算理论或者密码学方面的数 ...