Mục lục bài viết
Để tạo hiệu ứng line effect khi hover này, các bạn chỉ cần coppy toàn bộ đoạn CSS bên dưới của mình, và dán vào khung CSS Tùy Chỉnh trong Tùy Biến của Theme là được.
|
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 |
/*line effect animation by tiencuong.info*/ .post-item .col-inner::before, .post-item .col-inner::after{ content:""; width: 0; height: 2px; z-index:1; position: absolute; transition: all 0.2s linear; background: #f8be00; box-shadow: transition:400ms ease all; transition-delay: 0.3s; } .post-item .col-inner .box::before, .post-item .col-inner .box::after{ content:""; width:2px; height:0; z-index:1; position: absolute; transition: all 0.2s linear; background: #f8be00; transition:400ms ease all; transition-delay: 0s; } .post-item .col-inner:hover::before, .post-item .col-inner:hover::after{ width: 100% ; } .post-item .col-inner:hover .box::before, .post-item .col-inner:hover .box::after{ height: 100%; } .post-item .col-inner::before{ right: 0; top: 0; } .post-item .col-inner::after{ left: 0; bottom: 0; } .post-item .col-inner .box::before{ left: 0; top: 0; } .post-item .col-inner .box::after{ right: 0; bottom: 0; } .post-item .col-inner:hover::before, .post-item .col-inner:hover::after{ transition-delay: 0s; } .post-item .col-inner:hover .box::before, .post-item .col-inner:hover .box::after{ transition-delay: 0.3s; } |
Chú ý: Để thay đổi màu hiệu ứng của line, các bạn chỉ cần thay đổi lại mã màu tại 2 dòng 9 và 21 thành màu phù hợp với tone màu chủ đạo trên website của các bạn.
