Trong bài viết này chúng tôi sẽ hướng dẫn bạn tạo hiệu ứng xoay tròn hình ảnh bằng CSS3 cho Blogger đơn giản. Xin giải thích thêm, khi áp dụng thủ thuật này, hình ảnh xoay 1 vòng, chuyển thành hình tròn nếu độc giả rê chuột khá đẹp mắt.

Bản chất hiệu ứng là sử dụng CSS3 tạo hiệu ứng xoay tròn ảnh và hiệu ứng bo tròn ảnh nên sẽ ko làm giảm tốc độ Blog.

Để tạo hiệu ứng xoay tròn ảnh Blogger, đầu tiên cần áp dụng mã CSS3 bằng thêm đoạn code vào trước thẻ ]]>

.morph img {
    border:25px solid #158aee;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
  }
  .morph img:hover {
    border:25px solid #158aee;
    border-radius: 250px;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    margin: 0;
    padding: 0;
    margin-bottom:0px;
    overflow:hidden;
  }

Trong đó :

border:25px solid #158aee;

Là viền trước rê chuột với

25px: kích thước viền
#158aee: màu đường viền

Bạn có thể xóa đi nếu không cần thiết

border:25px solid #158aee;

Là viền sau khi rê chuột vào. Cái này tương tự như trên.

Tiếp theo, thêm ảnh có hiệu ứng vào bài viết bất cứ chỗ nào, chỉ cần thêm mã sau vào. Lưu ý thêm vào bài viết phải sang chế độ HTML

<div class="morph pic">
  <img alt="morph hover effect" src="http://1.bp.blogspot.com/-H0SVTqiQX9A/Uf-_3xUp7aI/AAAAAAAABew/GE1y6X3oieE/s1600/morph.png" />
</div>

Trong đó http://1.bp.blogspot.com/-H0SVTqiQX9A/Uf-_3xUp7aI/AAAAAAAABew/GE1y6X3oieE/s1600/morph.png: link ảnh áp dụng hiệu ứng

  • Blogger
  • May 3, 2016
  • 0 comment
  • 148 views

Recent posts

Cẩn thận dính mã độc nguy hiểm khi search Google

Cẩn thận dính mã độc nguy hiểm khi search Google

Lợi dụng thói quen tìm kiếm trên Google của nhiều người, tin tặc đã tạo ra nhiều bẫy lừa đảo […]

[WordPress] Hướng dẫn thay đổi thư mục media mặc định trong WordPress

[WordPress] Hướng dẫn thay đổi thư mục media mặc định trong WordPress

Có nhiều lý do khiến bạn muốn thay đổi thư mục mặc định để lưu trữ media (hình ảnh, video,…) […]

Hướng dẫn xác thực số điện thoại cho tài khoản Facebook

Hướng dẫn xác thực số điện thoại cho tài khoản Facebook

Từ ngày 25/12/2024, tất cả các tài khoản mạng xã hội chưa được định danh sẽ bị ngừng hoạt động. […]

Một số người dùng Android có thể sẽ không sử dụng được ứng dụng ngân hàng

Một số người dùng Android có thể sẽ không sử dụng được ứng dụng ngân hàng

Thay đổi này có thể ảnh hưởng đến một bộ phận không nhỏ người dùng ứng dụng ngân hàng trên […]

Tính năng tìm kiếm AI của Google có mặt tại Việt Nam

Tính năng tìm kiếm AI của Google có mặt tại Việt Nam

Tuần này, Google AI Overviews bắt đầu triển khai đến hơn 100 quốc gia, bao gồm Việt Nam và hỗ […]

© 2021 Tạp Chí CNTT. Mr Hoang