Hướng dẫn tạo hiệu ứng xoay tròn hình ảnh trong blogger

                                                                                                                                      ...

Bài viết liên quan:

                                                       

                                                                                                                                                   Để tạo <strong>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ẻ]]>      

                                                     

[css].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;

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

[css]<div class=”morph pic”>

<img alt=”morph hover effect” src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzxxXGAhNT05iC7EN5WhTr_Sk5hdVwjSCQaCatmjUtz79691YBKZMk9-NWsG8VQuRtpn8adJxD8SBElbMVLogcXXfIKbRCX7IU4unoenzu7rZvV5gX4vdRi-TuCTNE-PlLa5UgLgR4hWdS/s1600/morph.png” />
</div>[/css]

Trong đó https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzxxXGAhNT05iC7EN5WhTr_Sk5hdVwjSCQaCatmjUtz79691YBKZMk9-NWsG8VQuRtpn8adJxD8SBElbMVLogcXXfIKbRCX7IU4unoenzu7rZvV5gX4vdRi-TuCTNE-PlLa5UgLgR4hWdS/s1600/morph.png : link ảnh áp dụng hiệu ứng