采用css实现流动的边框

  问题起缘一个曾经做过的项目, 类似excel那样, 选中单元格并复制或粘贴时有个边框流动的效果, like this:

       采用css实现流动的边框

  在前端要作出这种效果可能方法并不少, 不过我只想到了2种, 真边框与假边框, 真边框的意思就是说切实的通过css里的border来实现, 另一种就是找替代边框。

  实现效果如下:

      采用css实现流动的边框

              图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);
              };
        }

上一篇:C++对象模型详解


下一篇:hdu5289 ST表+二分