CSS3 Animation Framework - Hiệu ứng slideUp tuyệt đẹp cho Blogspot

Quản trị viên tháng 7 07, 2018 #Animation Framework #CSS

Có nhiều cách để trang trí cho blog của mình, và đây cũng là 1 trong những cách trang trí cho blog đẹp nhất và đơn giản nhất. Sử dụng hoàn toàn CSS nên rất dễ thực hiện và không ảnh hưởng đến tốc độ load trang. Bạn có thể ngó qua loạt bài viết về chuyên mục Animation Framework trong blog của mình để có nhiều cái trang trí hơn cho blog nhé.

Xem Demo ngay tại trang này, F5 để thấy hiệu ứng.

Cách thực hiện

Thêm toàn bộ CSS bên dưới vào Template là xong!

/* CSS cho trình duyệt Chrome or Cốc Cốc */
@-webkit-keyframes bsw-slideUp {
 from {
  -webkit-transform: translate(0px, 1000px)
 }
 to {
  -webkit-transform: translate(0px, 0px)
 }
}
/* CSS cho trình duyệt Firefox*/
@-moz-keyframes bsw-slideUp {
 from {
  -moz-transform: translate(0px, 1000px)
 }
 to {
  -moz-transform: translate(0px, 0px)
 }
}
/* CSS cho trình duyệt Microsoft Edge */
@-ms-keyframes bsw-slideUp {
 from {
  -ms-transform: translate(0px, 1000px)
 }
 to {
  -ms-transform: translate(0px, 0px)
 }
}
/* CSS cho trình duyệt Opera */
@-o-keyframes bsw-slideUp {
 from {
  -o-transform: translate(0px, 1000px)
 }
 to {
  -o-transform: translate(0px, 0px)
 }
}
@keyframes bsw-slideUp {
 from {
  transform: translate(0px, 1000px)
 }
 to {
  transform: translate(0px, 0px)
 }
}
#sidebar-bsw { /* thay thành ID bạn muốn áp dụng hiệu ứng */
 -webkit-animation: bsw-slideUp 3s; /* 3s là khoảng thời gian hiệu ứng thực thi */
 -moz-animation: bsw-slideUp 3s;
 -ms-animation: bsw-slideUp 3s;
 -o-animation: bsw-slideUp 3s;
 animation: bsw-slideUp 3s;
}

Tổng kết

Đây là thủ thuật rất cũ, mình đã viết cách đây mấy năm rồi ở blog bacsiwindows cũ của mình :D thấy khá đẹp nên mang lên đây chia sẻ lại cho các bạn, hy vọng sẽ hữu ích!

Có nhiều cách để trang trí cho blog của mình, và đây cũng là 1 trong những cách trang trí cho blog đẹp nhất và đơn giản nhất. Sử dụng hoàn toàn CSS nên rất dễ thực hiện và không ảnh hưởng đến tốc độ load trang. Bạn có thể ngó qua loạt bài viết về chuyên mục Animation Framework trong blog của mình để có nhiều cái trang trí hơn cho blog nhé.

Xem Demo ngay tại trang này, F5 để thấy hiệu ứng.

Cách thực hiện

Thêm toàn bộ CSS bên dưới vào Template là xong!

/* CSS cho trình duyệt Chrome or Cốc Cốc */
@-webkit-keyframes bsw-slideUp {
 from {
  -webkit-transform: translate(0px, 1000px)
 }
 to {
  -webkit-transform: translate(0px, 0px)
 }
}
/* CSS cho trình duyệt Firefox*/
@-moz-keyframes bsw-slideUp {
 from {
  -moz-transform: translate(0px, 1000px)
 }
 to {
  -moz-transform: translate(0px, 0px)
 }
}
/* CSS cho trình duyệt Microsoft Edge */
@-ms-keyframes bsw-slideUp {
 from {
  -ms-transform: translate(0px, 1000px)
 }
 to {
  -ms-transform: translate(0px, 0px)
 }
}
/* CSS cho trình duyệt Opera */
@-o-keyframes bsw-slideUp {
 from {
  -o-transform: translate(0px, 1000px)
 }
 to {
  -o-transform: translate(0px, 0px)
 }
}
@keyframes bsw-slideUp {
 from {
  transform: translate(0px, 1000px)
 }
 to {
  transform: translate(0px, 0px)
 }
}
#sidebar-bsw { /* thay thành ID bạn muốn áp dụng hiệu ứng */
 -webkit-animation: bsw-slideUp 3s; /* 3s là khoảng thời gian hiệu ứng thực thi */
 -moz-animation: bsw-slideUp 3s;
 -ms-animation: bsw-slideUp 3s;
 -o-animation: bsw-slideUp 3s;
 animation: bsw-slideUp 3s;
}

Tổng kết

Đây là thủ thuật rất cũ, mình đã viết cách đây mấy năm rồi ở blog bacsiwindows cũ của mình :D thấy khá đẹp nên mang lên đây chia sẻ lại cho các bạn, hy vọng sẽ hữu ích!

Bình luận

Chia sẻ

Bài Liên Quan Tác Giả

Huỳnh Phụng Blogger

Tôi thích viết Blog để chia sẻ trãi nghiệm của chính mình. Tôi làm việc về Digital Marketing (SEO, Google Adwords, Facebook) và hy vọng sẽ có cơ hội hợp tác với bạn trong tương lai. Cùng chia sẻ kinh nghiệm mình có được