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ữ
Share Code tạo Border xoay bằng CSS và HTML cực Đẹp
 |  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
- 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% );
}
}
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 ↓
border-xoay-html-css.zip (679B)
Lượt xem: 659 
Đánh giá: 4.5/ 5, 659 bình chọn
| - Chia sẻ: |   |
Link:
Còn “nhiều” Lắm!