js+css实现卡通眼睛眼球盯着鼠标位置转动跟随交互效果代码
代码语言:html
所属分类:其他
代码描述:js+css实现卡通眼睛眼球盯着鼠标位置转动跟随交互效果代码
代码标签: js css 卡通 眼睛 眼球 盯着 鼠标 位置 转动 跟随 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <style> * { /* 常规初始化 */ margin: 0; padding: 0; box-sizing: border-box; /* 解决手机浏览器点击有选框的问题 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { /* 常规居中显示 */ display: flex; justify-content: center; align-items: center; min-height: 100vh; /* 简单背景颜色,radial-gradient() 径向渐变 */ background: radial-gradient(#33bbff, #1144ff); } .box { /* 父盒子内部元素排开 */ display: flex; /* 子元素间隔 */ gap: 4vmin; } .box .eye { /* 眼睛的宽高、背景颜色、圆 */ width: 20vmin; height: 20vmin; background-color: #fff; border-radius: 50%; /* 内外阴影 */ box-shadow: 0 0 4vmin rgba(0, 0, 0, 0.2), inset 0 0 2vmin #33bbff, inset 0 0 4vmin #33bbff; position: relative; } .box .eye::before { content: ""; /* 中间眼珠的大小、颜色、圆 */ width: 40%; height: 40%; background-color: #333; border-radius: 50%; /* 有个圈的边框 */ border: 1vmin solid #33bbff; /* 伪元素没有初始化上 */ box-sizing: border-box; /* 定位,让眼珠不在正中间,在居中的基础上向一边偏移一点就行 */ position: absolute; top: 50%; left: 30%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="box"> <div class="eye"></div> <div class="eye"></div> </div> <script > /** * eyeball 设置两个眼睛的旋转值 */ function eyeball() { // 获取两只眼睛的元素 const eyes = document.querySelectorAll(".eye"); // 简单循环一下,分别设置两个眼睛 eyes.forEach((eye) => { /** * eye.getBoundingClientRect().left 元素盒子距离窗口 左边距离 * eye.getBoundingClientRect().top 元素盒子距离窗口 上边距离 * * eye.clientWid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0