原生JS+CSS：实现吉祥物眼球跟随鼠标转动

最新推荐文章于 2025-01-05 16:40:24 发布

原创

最新推荐文章于 2025-01-05 16:40:24 发布

· 819 阅读

7 ·

版权

文章标签：

#javascript #css #前端 #学习 #css3

前言

工作中一个小小的特效 ✨

本来想运用 perspective-origin ，最后发现不用那么高大上，如果有更好地实现方案欢迎评论区交流~

1.在线尝试

CodeSandbox

2.仓库地址

Gitee: https://gitee.com/yuziikuko/eyes-mousemove.git
GitHub: https://github.com/yuziikuko/Eyes_Mousemove.git

3.效果预览

（一）准备素材

一张固定宽高的吉祥物 png 图片，眼球区域挖空
一张等宽高的眼球图片，白色背景充当眼白
本文使用阿里巴巴矢量图标库的素材，笔者自己用 PS 把眼球抠出来处理了一下，仅供演示用

钢笔工具 yyds!!!（破音

（二）搭建项目

不管三七二十一，先把猫猫头摆在页面正中间

<div class="container">
  <div class="cat-block">
    <img src="img/head.png" alt="cat-head" class="cat-head" />
  </div>
</div>

* {
   
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}
.container {
   
  min-width: 1200px;
  width: 100vw;
  height: 100vh;
  background-image: radial-gradient(rgb(128, 0, 0) 0%, rgb(0, 0, 0) 100%);
  position: relative;
}
.cat-block {
   
  width: 500px;
  height: 500px;
  position: relative;
  left: 50%;