小黄人眼睛跟随鼠标移动

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TcYEdxOO-1580558297980)(演示.gif)]

代码区

html

<div class="face"> <!-- 脸部 --><div class="eyes"> <!--  眼睛 --><div class="eye"></div><div class="eye"></div></div>
</div>
<script src="js/main.js"></script>

CSS

* {margin: 0; /* 外边距 */padding: 0; /* 内边距 */box-sizing: border-box; /* 盒子大小规则 */
}
body{display: flex; /* 弹性盒模型 */justify-content: center; /* 主轴对齐方式 */align-items: center; /* 交叉轴对齐方式 */min-height: 100vh; /* 最小高度：100视窗大小 */background: #5d3800; /* 背景颜色 */
}/* 黄色圆脸 */
.face{position: relative; /* 相对定位 */width: 300px; /* 宽度 */height: 300px; /* 高度 */border-radius: 50%; /* 边框圆角 */background: #ffcd00;display: flex;justify-content: center;align-items: center;
}
/* 嘴巴 */
.face::before{content: ''; /* 内容 */position: absolute;top: 180px; /* 距上部 */width: 150px;height: 70px;background: #b57700;border-bottom-left-radius: 70px; /* 左下圆角 */border-bottom-right-radius: 70px;transition: .5s; /* 过渡时间 */
}
/* 悬停到face时嘴就行变化 */
.face:hover::before{content: '';top: 200px;width: 150px;height: 30px;/* 圆角归0为矩形 */border-radius: 0;
}
/* 眼睛框体 */
.eyes{position: relative;top: -40px;display: flex;
}
/* 2只眼睛 */
.eyes .eye{position: relative;width: 80px;height: 80px;display: block;background-color: #fff;margin: 0 15px;border-radius: 50%;
}
/* 眼珠 */
.eyes .eye::before{content: '';position: absolute;top: 50%;left: 25px;transform: translate(-50%, -50%); /* x,y轴移动 */width: 40px;height: 40px;background: #333;border-radius: 50%;
}

JS

// 给body添加鼠标移动事件 eyeball
document.querySelector('body').addEventListener('mousemove', eyeball);
// 事件函数
function eyeball() {// 根据css选择器 获取到元素 放入数组var eye = document.querySelectorAll('.eye');// 调用数组中的每个元素eye.forEach(function(eye) {// 元素相对于窗口左边的距离  左边框的宽度let x = (eye.getBoundingClientRect().left + (eye.clientLeft / 2));// 同上let y = (eye.getBoundingClientRect().top + (eye.clientTop / 2));// pageX 鼠标指针的位置，相对于文档左边缘let radian = Math.atan2(event.pageX - x, event.pageY -y);let rot = (radian * (180 / Math.PI) * -1) + 270;// 修改旋转角度eye.style.transform = 'rotate(' + rot + 'deg)';})
}

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

小黄人眼睛跟随鼠标移动相关推荐

模仿ofo小黄人眼睛跟随手机移动
先上ofo效果图模仿图自己为小黄人增加了墨镜实现原理很简单,就是根据传感器控制控件的移动. 上代码: 实例化传感器管理器对象,并实现传感器监听: public class MainActivit ...
html怎么制作小黄人,【PS教程】制作一个小黄人
原标题:[PS教程]制作一个小黄人小黄人已经是个无需介绍的人气角色,呆萌的外表让他成为了践踏主角的超级巨星,在全球拥有无数粉丝,作为喜欢小黄人的设计师,是不是一定要懂得3D软件才能做出小黄人哩?NO ...
仿新版ofo共享单车小黄人动态效果
前言最近升级小黄车到最新版本,发现ofo与小黄人合作,生产了一批小黄人版小黄车,甚是可爱-,并且App的界面也进行了相应的效果改变,用车按钮变成了小黄人的头像,小黄人的眼睛还可以跟随设备的倾斜进行转 ...
纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
IOS绘制小黄人，对绘图知识的一个练习
IOS绘制小黄人,对绘图知识的一个练习 #define kTopX rect.size.width * 0.5 #define kTopRadius 80 #define kTopY 260// // ...
绘制半圆_Android Canvas 绘制小黄人
❝ 学习往往是枯燥的,如果能用一个有趣 Demo 来学习和练习技术,那对知识的掌握就会更牢固.我在学习 Canvas 绘制 API 的时候就是这样做的. ❞ 截图镇楼效果图我觉得这个绘制小黄人的自 ...
微信小程序相关三、css写小黄人
小程序上课第三天,因为今天院里有活动,所以没去上课,第四天上午又因为要召开入党转正大会,又耽误了一上午,下午去上课,要了资料.这两天讲了一些零零碎碎的东西,做的实例有上面这个小黄人都是用的css,基 ...
Python小黄人绘制
Python小黄人绘制使用python turtle库绘制小黄人附上各坐标点的坐标图完整代码: import turtle as t # 初始化 t.setup(800,800) t.pen ...
html设计动画小黄人,【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器
仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我 ...

小黄人眼睛跟随鼠标移动

小黄人眼睛跟随鼠标移动

效果图

代码区

html

CSS

JS

小黄人眼睛跟随鼠标移动相关推荐

最新文章

热门文章