Đường viền hoạt hình chỉ với css cho blogspot

Đường viền hay border trong blog/web là những đường bao quanh một phần tử, thành phần.Nhiều khi bạn không muốn sử dụng các dạng border đơn giản mà cần có sự khác lạ đôi chút về kiểu cách,

Vậy bạn có thể sử dụng border hoạt hình -Border animation chỉ với css cho blog/web của mình.

Kiểu 1
DEMO

Nội dung

Nội dung

Nội dung

Dưới đây là 2 thành phần gồm CSS và HTML để tạo border trên.Gồm 3 kiểu đường viền tương ứng với one, two và three
+ CSS:

.animation-examples {
  width: 600px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial;
}
/*------------*/
.animation-examples.one {
  color: #69D2E7;
  outline: 10px dashed #E0E4CC;
  box-shadow: 0 0 0 10px #69D2E7;
  animation: 1s animateBorderOne ease infinite;
}

@keyframes animateBorderOne {
  to {
    outline-color: #69D2E7;
    box-shadow: 0 0 0 10px #E0E4CC;
  }
}
/*------------*/
.animation-examples.two {
  color: #FA2A00;
  outline: 10px dashed #F2D694;
  box-shadow: 0 0 0 10px #FA2A00;
  animation: 2s animateBorderTwo ease infinite;
}

@keyframes animateBorderTwo {
  to {
    outline-color: #FA2A00;
    box-shadow: 0 0 0 10px #F2D694;
  }
}
/*------------*/
.animation-examples.three {
  color: #BEF202;
  background: linear-gradient(to bottom, #BEF202 50%, #1B676B 50%);
  background-size: auto 2px;
  outline: 10px dashed #BEF202;
  box-shadow: 0 0 0 10px #1B676B;
  animation: 1s animateBorderThree ease infinite;
}

@keyframes animateBorderThree {
  to {
    outline-color: #1B676B;
    box-shadow: 0 0 0 10px #BEF202;
  }
}
}

+ HTML:

<div class="animation-examples one">Nội dung</div>
  
  <div class="animation-examples two">Nội dung</div>
  
  <div class="animation-examples three">Nội dung</div>

Bạn dùng loại nào thì lấy css và html tương ứng, trong đó phần class "animation-examples" là chung