采用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工具,点击"开始"--"运行",输入 ...
一周排行
  • 在Objective-C函数的入口处(第一行)加断点,可用esp指针来探查参数. 以esp为基址,往后的偏移分别是: 0:函数执行完毕后的返回地址(不是返回值的地址哦) 4:对象实例的指针,即self指针 8:sel ...
  • /// <summary> /// 将ListItems中存储的值生成SQLCommand对象,进行修改DataBaseTableName中ID为WhereID的记录操作 /// </summary ...
  • 据新华社电 昨日,中国机电产品进出口商会秘书长刘春在广交会上表示,目前全球手机市场99%的利润都被苹果和三星赚走,中国企业尚未形成核心竞争力.即使全球深陷金融危机,我国外贸出口增幅下降,手机出口依然一枝独秀.今年我国 ...
  • 我攻破了美军海军网站 [1] 计算机屏幕上的数字还在不停的跳动,我的运气总是不好,这辈子中过最大的奖就是安慰奖.所以,我总是没有碰到过测试几分钟,密码就跳出来的情况.现在我都习惯了.电视太难看,中央某台正在作一个节目 ...
  • CREATE OR REPLACE FUNCTION C2B (b IN CLOB default empty_clob()) RETURN BLOB -- typecasts BLOB to CLOB (binar ...
  • .serialize() 方法使用标准的 URL-encoded 符号上建立一个文本字符串. 它可以对一个代表一组表单元素的 jQuery 对象进行操作,比如<input>, <textarea&g ...
  • 易网科技讯 8月15日消息,据国外媒体报道,消息来源透露,苹果今年秋天新产品发布会不会推出新产品iPad Air 3,可能只有iPad mini 4.消息来源对台湾的电子时报(DigiTimes)称,作为iPad m ...
  • XenServer部署系列之2系统安装及许可 作业环境 服务器#1 OS:XenServer 6.2 Hostname:xsr01 Eth0 IP:192.168.0.241/24 Gateway:IP:192.16 ...
  • 设置cookie过期时间 默认cookies失效时间是直到关闭浏览器,cookies失效,也可以指定cookies时间. Response.Cookies("user_name").Expires ...
  • 据日本<产经新闻>7月15日报道,日本著名游戏开发公司任天堂,日前迎来任天堂红白机(FC)发行30周年纪念.不过,在迎来30周年纪念的同时,任天堂公司也指出,至今仍幸存于多样化的游戏市场中,彻底的改革才是 ...