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
  • 260 views

Recent posts

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft đã gióng lên hồi chuông cảnh báo về Lumma Stealer, một loại mã độc chuyên đánh cắp thông tin, […]

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Một tính năng đột phá vừa được Google chính thức ra mắt trên trình quản lý mật khẩu tích hợp […]

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google bắt dầu triển khai tính năng dịch giọng nói trực tiếp trong cuộc gọi, khẳng định có thể khớp […]

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

Những chiếc iPhone đã sống đủ lâu với ngôi vị quán quân di động, đã đến lúc sẽ có công […]

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

Tạo custom Action Hook trong WordPress là một kỹ năng rất hữu ích để tùy chỉnh và mở rộng chức […]

© 2021 Tạp Chí CNTT. Mr Hoang