Hahaha, vừa tìm được một đoạn css rất hay có thể làm đẹp cho blog của mình hoặc cho bạn nào muốn làm một trang landing page cực độc nhé.
Demo “sống”
Các bạn tự làm rồi tự trải nghiệm nhé 😀
Design
Ngay khi các bạn view source lên các bạn cũng có thể học được ngay cách này, vì mình đã áp dụng nó cho blog của mình, nhìn cũng bắt mắt, làm nổi bật bài viết của mình hơn đúng không ^^
Đầu tiên các bạn cần khung HTML nhé
|
1 2 3 4 5 6 7 |
<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> |
Rất đơn giản, tiếp theo là đoạn css trang trí
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
.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 😀
