边框滚动动画

1. 虚线边框滚动动画

兼容IE10+

1
2
3

<div class="box">
    <div class="content">内容占位</div>
</div>

 .box {
      width: 200px;
      background: repeating-linear-gradient(135deg, transparent, transparent 3px, #000 3px, #000 8px);
      animation: shine 1s infinite linear;
      overflow: hidden;
}

.content {
      height: 128px;
      margin: 1px;
      padding: 10px;
      background-color: #fff;
 }

@keyframes shine {
      0% {
        background-position: -1px -1px;
      }
      100% {
        background-position: -12px -12px;
      }
}

点击查看实例效果

2. 实线边框loading动画

兼容IE10+

1	<div class="box"></div>

.box {
      height: 96px;
      width: 128px;
      display: inline-block;
      padding: 10px;
      position: relative;
      text-align: center;
	}

    .box::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border: 2px solid #cd0000;
      animation: borderAround 1.5s infinite linear;
    }

    @keyframes borderAround {
      0%,
      100% {
        clip: rect(0 148px 2px 0);
      }
      25% {
        clip: rect(0 148px 116px 146px);
      }
      50% {
        clip: rect(114px 148px 116px 0);
      }
      75% {
        clip: rect(0 2px 116px 0);
      }
    }

点击查看实例效果

转自：张鑫旭的博客