Hiệu Ứng Xoay Tròn Khi Rê Chuột Vào

Hiệu ứng xoay tròn khi rê chuột

Thủ thuật này giúp tạo ra hiệu ứng xoay tròn ảnh 360 độ khi bạn ghê chuột vào hình ảnh giúp làm cho blog được thú vị hơn ngoài ra còn bo tròn hình ảnh lại 50%. Bạn có thể tùy chỉnh lại thông số / những dòng chữ mình đã đánh dấu màu đỏ

Hiệu ứng xoay tròn khi rê chuột vào ảnh

Bước 1:
Vào mẫu nhấn Ctrl +F tìm thẻ ]]></b:skin>

Bước 2:Dán đoạn code bên dưới vào trước nó

.post img {
    overflow: hidden; 
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.post img:hover {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Chú giải:
Với các đoạn all .5s ease chính là thời gian để hiệu ứng xảy, trong trường hợp này là 0.5s bạn có thể tùy chỉnh tốc độ lại
border-radius: 50% là độ bo tròn của ảnh, bạn có thể tùy chỉnh lại thành % hoặc có thể sử dụng px
transform: rotate(360deg): Lúc này ảnh sẽ xoay 360 độ tức là đúng 1 vòng quay, bạn có thể tùy chỉnh 720 độ hoặc 1080 độ

Thêm thủ thuật mới là phóng to và làm mờ ảnh

Thủ thuật này giúp tạo ra hiệu ứng phóng to ảnh và làm mờ hình ảnh. Bạn có thể tùy chỉnh lại những con số bên dưới

Bước 1:
Vào mẫu nhấn Ctrl +F tìm thẻ ]]></b:skin>

Bước 2:Dán đoạn code bên dưới vào trước nó

.post img:hover {-webkit-transform: scale(1.01, 1.01);  -moz-transform: scale(1.01, 1.01);  -ms-transform: scale(1.01, 1.01);  -o-transform: scale(1.01, 1.01);  transform: scale(1.01, 1.01);  opacity: 0.5;}.post img {  -webkit-transition-duration: 1.0s;  /* Webkit: Animation duration; */  -moz-transition-duration: 1.0s;  -o-transition-duration: 1.0s;}

Thủ thuật làm chậm hiệu ứng rê chuột vào các thành phần

Bước 1:
Vào mẫu nhấn Ctrl +F tìm thẻ ]]></b:skin>

Bước 2:Dán đoạn code bên dưới vào trước nó

:hover{transition: all .5s ease-out;}

Với đoạn code này không có thuộc tính id hoặc class trước nó. Do đó nó sẽ có tác dụng lên tất cả thuộc tính hover trong blog. Hiệu ứng này sẽ làm các hoạt cảnh khi rê chuột của bạn mượt mà hơn

Tạo Widget dịch Cho Blogspot

<div id="responsiveness">
<form action="http://bea.vn/course/blocks/dictionary_mc/dic/search.php" method="post" name="dictionary" style="margin: 4px;" target="_blank" onsubmit="return doSearch(this);">
<select class="placer" name="dict" style="color:#333;padding:6px;font-size: 14px; width: 100%;margin-bottom:7px;border:1px solid #eee;border-radius:5px;"><option selected value="ev" />English - Vietnamese<option value="ve" />Vietnamese - English</select>
<input class="placer" name="word" placeholder="Nhập từ cần dịch" style="width: 100%;font-family:PT Sans,sans-serif" type="text" />
<input name="go" style="font-size: 14px;" type="submit" value="TRANSLATE" class="button"/></form>
</div>
<style>
#responsiveness{padding:1px;text-align:center;background: #FF4D11;}
input.placer{color:#333;padding:8px;font-size:14px;border:1px solid #EEE;transition:border .15s linear 0s,box-shadow .15s linear 0s,color .15s linear 0s;border-radius:3px;width:93%!important}input.button{cursor: pointer;border-radius:4px;color:#fff;background:#F77B09;border: 1px solid #B95900;padding:8px 0px;width:100%;margin:6px auto 0}input.button:hover{background:#FFF;color:#333
}
</style>

 - Chúc các bạn thành công