Share code tạo hiệu ứng rê chuột cho blogspot (phiên bản nhà làm)
Tình cờ mình tự chế ra hiệu ứng này, trông hơi độc lạ một tý =))
Cách tạo hiệu ứng rê chuột cho blogspot:
Bước 1: Sao chép và dán đoạn code dưới đây lên trên thẻ ]]></b:skin>
/* CSS hiệu ứng rê chuột nhà làm */
.tda-mouse-cursor{position:fixed;left:0;top:0;pointer-events:none;border-radius:50%;-webkit-transform:translateZ(0);transform:translateZ(0);visibility:hidden}
.tda-cursor-inner{margin-left:-3px;margin-top:-3px;width:6px;height:6px;z-index:10000001;background-color:#CED0D4;-webkit-transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out}
.tda-cursor-inner.tda-cursor-hover{margin-left:-30px;margin-top:-30px;width:60px;height:60px;background-color:#CED0D4;opacity:.3}
.tda-cursor-outer{margin-left:-15px;margin-top:-15px;width:30px;height:30px;border:2px solid #CED0D4;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:10000000;opacity:.5;-webkit-transition:all .08s ease-out;transition:all .08s ease-out}
.tda-cursor-outer.tda-cursor-hover{opacity:0}
background-color: #CED0D4 có 3 đoạn như thế này
Các bạn thể đổi màu tùy thích nhé
Bước 2: Sao chép và dán đoạn code dưới đây lên trên thẻ </body>
<!-- JavaScript hiệu ứng rê chuột nhà làm -->
<div class='tda-mouse-cursor tda-cursor-outer'></div>
<div class='tda-mouse-cursor tda-cursor-inner'></div>
<script async='async'>//[CDATA[
$(function () {
'use strict';
var _window = $(window);
var screenWidth = _window.width();
if (screenWidth > 991) {
var myCursor = jQuery('.tda-mouse-cursor');
if (myCursor.length) {
if ($("body")) {
const e = document.querySelector(".tda-cursor-inner"),
t = document.querySelector(".tda-cursor-outer");
let n, i = 0,
o = !1;
window.onmousemove = function (s) {
o || (t.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)"), e.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)", n = s.clientY, i = s.clientX
}, $("body").on("mouseenter", "a, .tda-cursor-pointer", function () {
e.classList.add("tda-cursor-hover"), t.classList.add("tda-cursor-hover")
}), $("body").on("mouseleave", "a, .tda-cursor-pointer", function () {
$(this).is("a") && $(this).closest(".tda-cursor-pointer").length || (e.classList.remove("tda-cursor-hover"), t.classList.remove("tda-cursor-hover"))
}), e.style.visibility = "visible", t.style.visibility = "visible"
}
}
}
});
//]]>
script>
Lời kết:
Nếu thấy hay thì cho xin 1 cảm nhận và 1 nhận xét nhé.
Tham gia cuộc trò chuyện