wordpress如何实现鼠标跟随特效（附详细代码）

wordpress如何实现鼠标跟随特效，下面web建站小编给大家简单介绍一下具体实现代码！

在functions.php中新增以下代码：

function zm_jquery_script() {
  wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'zm_jquery_script' );
function zm_mouse_cursor() { ?>
<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>
<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( 'wp_footer', 'zm_mouse_cursor' );

wordpress做时间列表，比如2024年1月文章列表

wordpress利用mysql获取指定分类下的文章

WordPress如何重置admin密码

WordPress教程如何自动删除文章中图片宽高样式

wordpress建站如何快速提交和优化您的网站（IndexNow插件）？

标签： wordpress技巧, wordpress鼠标特效

上面是“wordpress如何实现鼠标跟随特效（附详细代码）”的全面内容，想了解更多关于 wordpress 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4399.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！