网站添加鼠标跟随特效代码 实现拟态效果

公告:【重要】如果本站帮助到了您,还请您不要吝啬,把本站分享给更多的朋友哟~

  • 内容
  • 相关

网站添加鼠标跟随特效代码 实现拟态效果

1.png2.png

<!-- 必须的DIV -->
<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>
<!-- JS脚本 -->
<script>
jQuery(document).ready(function($){
var myCursor = jQuery('.mouse-cursor');
if (myCursor.length) {
if ($('body')) {
const e = document.querySelector('.cursor-inner'),
t = document.querySelector('.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, .cursor-pointer",
function() {
e.classList.add('cursor-hover'),
t.classList.add('cursor-hover')
}),
$('body').on("mouseleave", "a, .cursor-pointer",
function() {
$(this).is("a") && $(this).closest(".cursor-pointer").length || (e.classList.remove('cursor-hover'), t.classList.remove('cursor-hover'))
}),
e.style.visibility = "visible",
t.style.visibility = "visible"
}
}
})

</script>
<!-- 样式 -->
<style>
.mouse-cursor {
position: fixed;
left: 0;
top: 0;
pointer-events: none;
border-radius: 50%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
visibility: hidden
}

.cursor-inner {
margin-left: -3px;
margin-top: -3px;
width: 6px;
height: 6px;
z-index: 10000001;
background: #ffa9a4;
-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
}

.cursor-inner.cursor-hover {
margin-left: -18px;
margin-top: -18px;
width: 36px;
height: 36px;
background: #ffa9a4;
opacity: .3
}

.cursor-outer {
margin-left: -15px;
margin-top: -15px;
width: 30px;
height: 30px;
border: 2px solid #ffa9a4;
-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
}

.cursor-outer.cursor-hover {
opacity: 0
}

.main-wrapper[data-magic-cursor=hide] .mouse-cursor {
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
z-index: -1111
}
</style>
<?php }
add_action( 'footer', 'zm_mouse_cursor' );
访问者在接受本网站服务之前,请务必仔细阅读免责声明条款并同意声明。访问者访问本网站的行为以及通过各类方式利用本网站的行为,都将被视作是对本声明全部内容的无异议的认可。

本文标签:

上一篇:给网站用户头像添加呼吸光环和鼠标悬停旋转放大效果 css代码 下一篇:网站访客进站来源提醒代码 支持浏览器内核电脑系统和地区信息显示

是否感觉到迷茫?不知道看啥了?点我随便看看吧!任意跳转到随机文章(#^.^#)

本文链接:网站添加鼠标跟随特效代码 实现拟态效果 - https://www.qyun.vip/wangzhanyuanma/4760.html

官方微信公众号“看福利网”QQ交流群:①399835280 ②559335110 ③277235049

评论者的电子邮件地址不会被公开。 必填项已用*标注。每天点击网站内的广告,帮助网站运营发展。

"