采用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工具,点击"开始"--"运行",输入 ...
一周排行
  • #create ydds #date 0 var nextPageNo = 0; function pageTop(){     nextPageNo = 0     document.getEle ...
  • 易网科技讯 1月21日消息,据国外媒体报道,国外爆料者NextLeaks进一步透露了诺基亚首款低端安卓机"诺曼底"的命名.硬件配置和安卓版本等信息.几天前,网络上曝光了诺基亚"诺曼底&q ...
  •   htm5在html4.0. xhtm1.0的基础上增加了音频.视频.拖拽等功能,不过,htmL5,还在完善中,不过大部分浏览器都已经支持了部分功能.兼容性: 最新版本的 Safari.Chrome.Firefox ...
  • 易网科技讯 8月16日消息,据国外媒体报道, 在联想2012年第一财政季度的营收电话会议上,联想CEO杨元庆毫无忌讳的攻击微软公司推出Surface平板电脑进军硬件行业的策略."尽管我们不喜欢微软提供硬件, ...
  • 1.基本系统进程 Csrss.exe:这是子系统服务器进程,负责控制Windows创建或删除线程以及16位的虚拟DOS环境. System Idle Process:这个进程是作为单线程运行在每个处理器上,并在系统不 ...
  • 题意:有一个矩阵,矩阵里面有一些位置有树,矩阵的宽和高都给了.现在给你一个w*h的小矩阵,问用这个小矩阵最多能得到多少树. 思路:暴力枚举的话肯定超时,所以应该想其它的方法.很容易转化到二维树状数组上,然后就是裸的二 ...
  • 前两天行政的人申请台办公一体机,以前用过HP-LaserJet-M1005这款机,感觉不错,就买了一台.最近办公楼在装修,办公室里挤得不行,就想着把打印给连到办公室的一台做技术中心dhcp和samba服务器的机子上. ...
  • 本报讯(记者张艳)昨天,全球四大会计所之一德勤公布的一份报告称,从海外交易量和交易额来看,大中华企业海外交易,从2005全年约占全球并购活动的0.5%跃升至2011年上半年的约1.3%.该报告分析了2005年1月1日 ...
  •   本章介绍TimeZone.   TimeZone 简介 TimeZone 表示时区偏移量,也可以计算夏令时.在操作 Date, Calendar等表示日期/时间的对象时,经常会用到TimeZone:因为不同的时区 ...
  • ios7升级错误3194怎么办?接下来小编就为大家介绍苹果ios7升级错误3194原因及解决方法,感兴趣的朋友可以看一下 很多朋友在升级iOS7测试版的时候遇到了ios7升级错误3194的提示,这是什么愿意.有什么解 ...