Thứ Ba, ngày 08 tháng 12 năm 2015

Share Code tạo Border xoay bằng CSS và HTML cực Đẹp

Hiệu ứng CSS ngày càng phong phú vì thế mình xin chia sẻ các bạn hiệu ứng border xoay bằng css cực Đẹp này. Nó sẽ có tác dụng làm nổi bật khung nội dung mà bạn muốn người khác chú ý hơn... Hiệu ứng CSS border xoay rất bắt mắt vì thế đừng quá lạm dụng nó ở nhiều vị trí trên trang web của bạn
Để sử dụng các bạn copy 2 mã code HTMLCSS bên dưới vào web của bạn
DEMO các bạn xem cuối bài viết

Share Code tạo Border xoay bằng CSS và HTML cực Đẹp


HTML
<div class="rotating-dashed">
  <span class="dashing"><i></i></span>
  <span class="dashing"><i></i></span>
  <span class="dashing"><i></i></span>
  <span class="dashing"><i></i></span>
  <strong>Nội dung muốn thể hiện</strong>
</div>
CSS
.rotating-dashed {
  position: relative;
  margin: 40px auto;
  width: 90px;
  height: 90px;
  overflow: hidden;
  color: #3498db;
}
 
.rotating-dashed .dashing {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
 
.rotating-dashed .dashing:nth-of-type(1) { -webkit-transform: rotate(   0deg ); }
.rotating-dashed .dashing:nth-of-type(2) { -webkit-transform: rotate(  90deg ); }
.rotating-dashed .dashing:nth-of-type(3) { -webkit-transform: rotate( 180deg ); }
.rotating-dashed .dashing:nth-of-type(4) { -webkit-transform: rotate( 270deg ); }
 
.rotating-dashed .dashing i {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  border-bottom: 5px dashed;
}
 
.rotating-dashed strong {
  display: block;
  width: 105%;
  line-height: 90px;
  text-align: center;
  position: absolute;
  font-size: 50px;
}
 
.rotating-dashed:hover {
  color: white;
  cursor: pointer; 
}
 
.rotating-dashed .dashing i {
  -webkit-animation: slideDash 2.5s infinite linear;
}
 
@-webkit-keyframes slideDash {
  from { -webkit-transform: translateX( -50% ); }
  to   { -webkit-transform: translateX(   0% ); }
}


Done! tất cả chỉ có vậy thôi, rất đơn giản mà, phải không?. Nếu bạn nào không làm được, thì có thể xem đầy đủ nội dung đoạn code bên dưới nhé. Chú ý, bài này chỉ chạy được trên chrome thôi nhé. Lý do vì sao thì chắc các bạn đã biết rồi

Demo Online các bạn xem bên dưới (Bằng Chrome nhé)

Nội dung muốn thể hiện