May 3, 2016

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
  • 180 lượt xem

Recent posts

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

Rối loạn về tin đồn iPhone màn hình gập của Apple

Rối loạn về tin đồn iPhone màn hình gập của Apple

Báo cáo mới nhất cho hay, Apple vẫn chưa từ bỏ iPhone màn hình gập nhưng cũng không gấp gáp […]

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Một rò rỉ mới cho biết phiên bản cập nhật iOS 18 mà Apple phát hành vào mùa thu 2024 […]

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

TikTok thách thức công cụ tìm kiếm của Google

TikTok thách thức công cụ tìm kiếm của Google

TikTok đã trở thành công cụ tìm kiếm ngày càng phổ biến trong giới trẻ ở Mỹ. Một cuộc khảo […]

© 2021 Tạp Chí CNTT. Mr Hoang