css 边框线条动画 |

一、边框线条动画效果展示

正方形

长方形

1.1 实现思路

内部一个 DIV 盒子做矩形，外层用伪类生成两个 DIV 盒子做线条，需要比里面的 DIV 盒子大，动画效果开始执行时，使用 clip 属性对外层的两个 DIV 盒子进行截取，形成半折角，为了外层两条线条对称环绕，动画开始时使用 animation-delay 延迟 1/2 时间就可以了。

1.2 正方形代码

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS3</title>
	<style>
		.box, .box::before, .box::after {
		  position: absolute;
		  top: 0;
		  bottom: 0;
		  left: 0;
		  right: 0;
		}

		.box {
		  width: 200px;
		  height: 200px;
		  margin: auto;
		  color: #69ca62;
		  box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
		}
		.box::before, .box::after {
		  content: '';
		  z-index: -1;
		  margin: -10px;
		  box-shadow: inset 0 0 0 2px;
		  animation: clipMe 8s linear infinite;
		}
		.box::before {
		  animation-delay: -4s;
		}
		.box:hover::after, .box:hover::before {
		  background-color: rgba(255, 0, 0, 0.3);
		}

		@keyframes clipMe {
		  0%, 100% {
		    clip: rect(0px, 220.0px, 2px, 0px);
		  }
		  25% {
		    clip: rect(0px, 2px, 220.0px, 0px);
		  }
		  50% {
		    clip: rect(218.0px, 220.0px, 220.0px, 0px);
		  }
		  75% {
		    clip: rect(0px, 220.0px, 220.0px, 218.0px);
		  }
		}

		</style>
</head>
<body>
		<div class="box"></div>
</body>
</html>

1.3 长方形代码

动画详细数值计算看注释。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS3</title>
    <style>
      .box,
      .box::before,
      .box::after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }

      .box {
        width: 250px;
        height: 78px;
		border:1px solid #fff;
        margin: auto;
        color: #69ca62;
        box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
		box-sizing: border-box;
      }
      .box::before,
      .box::after {
        content: "";
        z-index: -1;
        margin: -8px;
        box-shadow: inset 0 0 0 2px;
        animation: clipMe 8s linear infinite;
      }
      .box::before {
        animation-delay: -4s;
      }
      .box:hover::after,
      .box:hover::before {
        background-color: rgba(255, 0, 0, 0.3);
      }

      /* 264px = (内部盒子宽度)250 + (外部盒子两边距内部盒子的距离8*2)16 - (外部盒子线条的宽度)2;
      	 2px = (外部盒子线条的宽度)2;   
         92px = (内部盒子高度)78 + (外部盒子两边距内部盒子的距离8*2)16 - (外部盒子线条的宽度)2;
         90px = (内部盒子高度)78 + (外部盒子两边距内部盒子的距离8*2)16 - (外部盒子两条线条的宽度2*2)4;
      */
      @keyframes clipMe {
        0%,
        100% {
          clip: rect(0px, 264px, 2px, 0px);
        }
        25% {
          clip: rect(0px, 2px, 92px, 0px);
        }
        50% {
          clip: rect(90px, 264px, 92px, 0px);
        }
        75% {
          clip: rect(0px, 264px, 92px, 262px);
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

二、属性详解

1.1 Clip属性

通过对元素进行剪切来控制元素的可显示区域，默认情况下，元素是不进行任何剪切的，但是也有可能剪切区域也显示的设置了clip属性。

1
2
3

.selector {
	clip: <shape> | auto | inherit
}

clip属性只接受三个不同的属性值：

<shape>：shape是一个函数功能，当使用仅使用rect()属性;
auto：这是一个默认值，clip设置auto值和没有进行剪切是一样的效果;
inherit：继承父元素的clip属性值。

clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。clip无法在设置“position:relative”和“position:static”上工作。

1.2 Rect()使用

rect()需要设置四个值：top, right, bottom和left。他们之间需要用逗号隔开，而且rect()属性值和margin、padding以及bodrder具有一样的标准，遵循TRBL顺时针旋转的规则。

1	clip: rect(<top>, <right>, <bottom>, <left>);

rect()和 <top> 和 <bottom> 指定偏移量是从元素盒子顶部边缘算起；<left> 和 <right> 指定的偏移量是从元素盒子左边边缘算起。

例子：

1 2	p#one { clip: rect(5px, 40px, 45px, 5px); } p#two { clip: rect(5px, 55px, 45px, 5px); }

上面的例子是在50X55px的长方形盒子中是行剪切，得到虚线的长方形。

end

部分转载

一、 边框线条动画效果展示