Home / Wordpress / Hướng Dẫn Thêm Hiệu Ứng Cho Sản Phẩm Và Bài Viết Flatsome

Hướng Dẫn Thêm Hiệu Ứng Cho Sản Phẩm Và Bài Viết Flatsome

Hướng Dẫn Thêm Hiệu Ứng Cho Sản Phẩm Và Bài Viết Flatso
Hướng Dẫn Thêm Hiệu Ứng Cho Sản Phẩm Và Bài Viết Flatso

Hôm nay mình chia sẽ cho anh em cách hover vào sản phẩm có chút hiệu ứng cho đẹp site sinh động chút, chứ đứng đơ đơ nhìn hơi chán, mà bài hướng dẫn này dùng css thôi chứ sài js nó làm site chậm vs giảm hiệu năng của site.

Trước khi dùng Hướng Dẫn Thêm Hiệu Ứng Cho Sản Phẩm Và Bài Viết Flatsome này bạn nên để ý các điều kiện bên dưới nhé, không là không hoạt động đâu.

nếu không sử dụng các điệu kiện trên không hẳn là không sử dụng được đâu nha! vì đoạn css này chủ yếu hoạt động dựa trên tên class mà theme Flatsome tạo ra, mình css lại thôi, nếu bạn sử dụng web khác, theme khác chỉ cần đổi tên trong css đi là được, vẫn sài bình thường nhưng bạn rành code một xíu

mà hiệu ứng mình css là hiệu ứng lướt sóng (Shine), có nhiều hiệu ứng khác nhau, bạn có thể tham khảo và đổi css là được

Các hiệu ứng hove: https://codepen.io/nxworld/pen/ZYNOBZ

  1. Cách Thêm Hiệu Ứng Hover Cho Sản Phẩm

    các bạn coppy đoạn code css bên dưới bỏ vào style.css của theme hoặc bạn làm theo đường dẫn này để bỏ đoạn css này vào nhé Giao diện –> Tùy biến –> Style –> Custom CSS hoặc Giao diện -> Sửa giao diện -> style.css (bỏ vào đây ra ngoài bạn bấm Ctrl+F5 để xoá cache đi nha) bạn bỏ vào và update lại là được

    .product-small .box-image:hover::before{
       -webkit-animation:shine .75s;animation:shine .75s
    }
    @-webkit-keyframes shine{
       100%{left:125%}
    }
    @keyframes shine{
       100%{left:125%}
    }
    .product-small .box-image::before{
      position:absolute;
      top:0;
      left:-75%;
      z-index:2;
      display:block;
      content:'';
      width:50%;
      height:100%;
      background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
      background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
      -webkit-transform:skewX(-25deg);transform:skewX(-25deg)
    }
    

    Demo: Panetory.com hoặc Congdongshop.com

  2. Cách Thêm Hiệu Ứng Hover Cho Bài Viết

    Cách làm cũng tương tự, bạn coppy đoạn code css bên dưới bỏ vào style.css của theme hoặc bạn làm theo đường dẫn này để bỏ đoạn css này vào nhé Giao diện –> Tùy biến –> Style –> Custom CSS hoặc Giao diện -> Sửa giao diện -> style.css (bỏ vào đây ra ngoài bạn bấm Ctrl+F5 để xoá cache đi nha) bạn bỏ vào và update lại là được

    .post-item .box-image:hover::before{
      -webkit-animation:shine .75s;
      animation:shine .75s
    }
    
    @-webkit-keyframes shine{
      100%{left:125%}
    }
    
    @keyframes shine{
      100%{left:125%}
    }
    
    .post-item .box-image::before{
      position:absolute;
      top:0;
      left:-75%;
      z-index:2;
      display:block;
      content:'';
      width:50%;
      height:100%;
      background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
      background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
      -webkit-transform:skewX(-25deg);transform:skewX(-25deg)
    }

    Demo:Congdongshop.com

Nếu bạn thấy hay hãy click quảng cáo cho mình đc 1 gói mỳ tôm ăn qua ngày là được, thank you mọi người.

Các bạn có thắc mắc gì thì liên hệ mình nhé thông qua website: congdongshop.com hoặc congdongblog.com , youngplus.vn của mình nhé,
Hotline: 0386270225 (A.Thông) nếu bạn có nhu cầu làm website :p.

About adminweb

Bạn Chưa biết ?

Code Chuyển Mô Tả Danh Mục Sản Phẩm Xuống Dưới

Code Chuyển Mô Tả Danh Mục Sản Phẩm Xuống Dưới WordPress

Code Chuyển Mô Tả Danh Mục Sản Phẩm Xuống Dưới WordPress Chào các bạn, hôm …

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đánh giá facebook