Old school Swatch Watches

CuDemVN.Wap.Sh

- GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam
- AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam
- HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

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

Admin* RoSino18k *
* 25-04-2016

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 code HTML và CSS 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
[Tải ảnh]


- Code 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>

- Code 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

Chúc các bạn thành công!
Nguồn: Tý K - CodeSEO.Net
↓ Tập tin Đính kèm ↓
↑↑ Lượt xem: 159
score
Đánh giá: 4.5/ 5, 159 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-159]