采用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,
              # 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,
                #,
                # 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,
              # 5px,
              black 10px)
              10 10 round;
          -webkit-animation: border-animation .3s infinite;

        } 

        @-webkit-keyframes border-light{
          100% {
            /* 背景为黑白条纹 */
            border-image:
              -webkit-repeating-linear-gradient(
                -45deg,
                #,
                # 5px,
                transparent 5px,
                transparent 10px);
              };
        }

更多相关文章
  • 易网科技讯 3月10日上午消息,腾讯今天上午收购了京东15%股份,并将旗下B2C平台QQ网购和C2C平台拍拍网的100%权益.物流人员和资产,以及易迅网少部分股份转让给京东,同时在公告中称京东将继续收购易迅剩余股份.对此,京东方面回应称:本次京东收购易迅部分股权,并有权购买易迅剩余的股权物流方面,易 ...
  • PHP是一种服务器端的嵌入式脚本语言,是一种服务器端.跨平台.面向对象.HTML嵌入式的脚本语言.本章将向读者介绍PHP开发环境搭建,常用的配置问题和解决方案.通过本章的学习,读者能够学到以下内容. 更换验证码 : Windows--AppserV集成安装包搭建PHP环境 : Linux--XAMP ...
  • 如何更好的达到防范黑客攻击,本人提一下个人意见!第一,免费程序不要真的就免费用,既然你可以共享原码,那么攻击者一样可以分析代码.如果在细节上注意防范,那样你站点的安全性就大大的提高了.即使出现了SQL Injection这样的漏洞,攻击者也不可能马上拿下你的站点. 由于ASP的方便易用,越来越多的网 ...
  • 这篇文章大家可以收藏下 我们知道,为了有效维护用户的使用权,进入电脑.上Internet.保护文档等,都要用到不同的账号或密码口令,可以说这些密码就是使用电脑的"通行证".如果万一忘记或弄混了哪个密码,机器是不认人的,没准儿会误了你的大事.为了减少遗忘密码给我们带来的麻烦,学上几 ...
  • 最近逃课做游戏,逃的有几门都要停考了,呵,百忙之中不忘超炒冷饭,感觉之前的人皮效果还是不够好,又改进了一些东西   首先上图   放大看细节 显而易见的比上次的效果要好很多,此次我把模型用3dmax进行了细化,模型裂缝情况有所好转,但是嘴唇等处还是有明显裂缝(没办法,网上没有比这个再细致的贴图了)  ...
  • "到底是谁占用了80端口,该怎么查,怎么终止它?",这里就简单讲解一下,在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.          这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入 ...
一周排行
  • 注:C#的文件操作都是包含在System.Io的命名空间里面. 一. Path类: 对一个路径做相应操作,包括文件路径,目录路径.通常会用到Path这个类. 1.更改路径字符串的扩展名 Public  static  ...
  • Collection下分为很多的子接口,其中有一个List接口,List接口中可以存放任意的数据.而且在List接口中内容是允许重复的.List接口的功能要比Collection接口强大很多,因为大量的扩充了Coll ...
  • 系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式——建造者模式 [ ...
  • 上课没好好听,floyd算法其实还是很简单的,适合算法入门,用三个for循环就可以解决问题,时间复杂度为O(n^3) Floyd算法的基本思想如下: 从任意节点A到任意节点B的最短路径不外乎2种可能,1是直接从A到B ...
  • 易网科技专栏作者 王鹏飞 两周前,接到老朋友牛立雄的电话,他所在的易网科技要推出一个专栏栏目,邀请我为这个栏目写点东西. 我从2003年开始就在移动互联网(那时叫无线或FREE WAP)摸爬滚打,算起来有七年了,在这 ...
  • Guava 在Google code 上地址:https://code.google.com/p/guava-libraries/ 首先为什么要学习这个库,在实习的时候看大神的代码很简洁,很多地方将一些琐碎凌乱的代码 ...
  • http://www.cnblogs.com/ronli/tag/C%23/
  • 题意: 输入一串只含有+和*号的表达式,可以通过添加括号来改变表达式的值,求表达式的最大最小值. 思路: 表达式中的数都是不大于20的正整数,由a*b+c='0'&&str[i]
  • http://wenku.baidu.com/link?url=ABXxm5yezMIQRJUV7XvNWUe_QpUUdpQ3IxGRpYUa760iex1_bygCcTBvEhCMvrdLAmSXvPEHV8Xh ...
  • 通过http请求传递xml流和接收xml流的代码示例 //1.在servlet中post一个xml流:import java.io.OutputStreamWriter;import org.jdom.Documen ...