Hướng dẫn tạo Border xoay bằng CSS và HTML cực đẹp

Xem: 455    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

9 điểm   ( 2 đánh giá ) File đã được kiểm thử


Hướng dẫn viết 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

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 HTML và CSS bên dưới vào web của bạn.

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é.

Hướng dẫn tạo Border xoay bằng CSS và HTML cực đẹp

Hướng dẫn tạo Border xoay bằng CSS và HTML cực đẹp Đăng ngày 11-10-2016  Hướng dẫn viết 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 4.5/10 455

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn