采用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工具,点击"开始"--"运行",输入 ...
一周排行
  • 出现问题 :   标题: 连接到服务器 无法连接到 .\SQLEXPRESS. 其他信息: 用户 'sa' 登录失败. (Microsoft SQL Server,错误: 18456)        解决方法:   ...
  • Cocos2d-x 3.1.1 lua-tests开篇 本篇博客打算从研究Cocos2d-x引擎提供的测试例子来写起,笔者针对Cocos2d-x 3.1.1这个版本来介绍如何来学习它给我们提供的例子,通过这些例子来深 ...
  •   此时无声胜有声!   So long, old friend...  http://blogs.sun.com/jag/entry/so_long_old_friend
  • <QQ西游>,最接近神的一个          久不搞魔兽,最近心血来潮,找了几个新网游玩.          第一次听说<QQ西游>,是在去年“腾讯嘉年华”上,印象中大幅的宣传海报上赫然写着 ...
  • 替代object加锁方式    .net中提供了更强大的system.threading.waithandle及其子类型,可以实现类似的效果. Mutex创建Singleton应用程序     Mutex不仅提供跨线 ...
  • 1.封装 首先是新建一个运算类(Calcultor.cs),它包含两个属性strNumA和strNumB,用以储存计算时的两个数,此外,还有一个虚方法Getresult(),用以得到运算的结果. public cla ...
  •   问题现象:我在Win7的虚拟机中安装XE2,前提是原来的系统上有D2007,安装后,新建个工程,F9报"File not controls.res".百思不得其解. 问题原因:因为没有增加D的 ...
  • 以下几种,是javascript中最常用的创建对象的方式.初学者看到后,可能会晕掉,甚至会觉得担心.其实完全不用担心,这些种方式,只需要掌握一两种,对其他的几种只需要理解就好了   前言:   随着web 2.0 的 ...
  • Geertjan一直致力于为Netbeans 6.0整合对Groovy的支持.对于在Groovy中能很方便地编写Swing代码他很是赞赏,他怀疑Groovy是否需要类似于Matisse的GUI设计工具.Danno F ...
  •  Sudoku Killer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...