博客
关于我
眼睛跟随鼠标转动的小黄人 html+css+js
阅读量:355 次
发布时间:2019-03-04

本文共 3656 字,大约阅读时间需要 12 分钟。

先上效果(完整代码在最后):

在这里插入图片描述

实现过程(可跟着一步一步书写):

1. 先设置基本的css样式,让body高度为100vh后,用flex布局让其子元素居中对齐,(这几行代码直接复制过去就行):

*{               padding: 0;            margin: 0;             } body{               height: 100vh;            display: flex;            justify-content: center;            align-items: center;            background-color: rgb(11, 12, 26);        }

display: flex;

justify-content: center;
align-items: center;子元素居中。
background-color: rgb(11, 12, 26);页面背景色。

2. 开始正式实现,先定义标签,.face是整个脸,.eye是两个眼睛:

3. 设置.face的样式,宽高等:

.face{              width: 200px;           height: 200px;           border-radius: 50%;           background: linear-gradient(180deg,rgb(252, 207, 5) ,rgb(255, 240, 36));           position: relative;           box-shadow: inset 0 0 3px rgb(15, 15, 9),           inset 0 0 5px rgb(15, 15, 9);                   }

border-radius: 50%; 角弧度

background: linear-gradient(180deg,rgb(252, 207, 5) ,rgb(255, 240, 36)); 渐变颜色。
position:relative;相对定位。
box-shadow:…;内阴影。

4.用双伪类定义嘴巴:

.face::after{               content: '';            position: absolute;            bottom: 12%;            left: 50%;            transform: translateX(-50%);            width: 90px;            height: 40px;             background-color: rgb(255, 199, 45);            border-radius:  0 0 70px 70px;            box-shadow: inset 0 0 5px rgb(53, 53, 53);        }

position: absolute;

bottom: 12%;
left: 50%;
transform: translateX(-50%); 绝对定位在合适的位置,
background-color:…背景色。
border-radius:…;四个角每个角的弧度。
box-shadow:…内阴影。

5. 设置眼睛的基本样式,宽高,颜色等,再给两个眼睛定位相应的位置:

.eye{                position: absolute;             width: 60px;             height: 60px;             border-radius: 50%;             background-color: #fff;             box-shadow: inset 0 0 5px rgb(58, 58, 58);         }          .face .eye:nth-child(1){                top: 26%;             left: 12%;         }         .face .eye:nth-child(2){                top: 26%;             right: 12%;         }

6.用双伪类定义眼球,宽高,角度,阴影等:

.eye::after{                content: '';             position: absolute;             top: 50%;             left: 5%;             transform: transLateY(-50%);             width: 50%;             height: 50%;             background-color: #000;             border-radius: 50%;             box-shadow: inset 0 0 3px white,             inset 0 0 5px white;         }

top: 50%;

left: 5%;
transform: transLateY(-50%); 设置一个初始位置。

7. js部分,实现眼睛随鼠标移动:

原理:通过鼠标位置给眼睛设置对应的旋转rotate角度。

var eye = document.querySelectorAll(".eye");        window.addEventListener('mousemove',function(event){                        eye.forEach(function(eye){               let angle = Math.atan2(event.pageX-eye.getBoundingClientRect()            .left-eye.clientLeft/2,event.pageY-eye.getBoundingClientRect().top            -eye.clientTop/2);            let rot = angle * 180 / Math.PI * -1 - 90 ;            eye.style.transform = `rotate(${     rot}deg)`;               })        })

var eye = document.querySelectorAll(".eye");获取眼睛元素。

window.addEventListener(‘mousemove’,function(event){…} ;给页面绑定鼠标移动事件。
eye.forEach(function(eye){…}; forEcah()方法,给数组里每个元素,也就是两个眼睛,都执行一次里面的函数。
Math.atan2(…)方法,他能返回某坐标相对于X轴的弧度。
event.pageX 鼠标相对于页面左侧距离。
event.pageY 鼠标相对于页面顶侧距离。
eye.getBoundingClientRect().left 眼睛相对于页面左侧距离。
eye.getBoundingClientRect().top 眼睛相对于页面顶侧距离。
eye.clientLeft 眼睛左边框宽度。
eye.clientTop 眼睛上边框宽度。
弧度换成角度:弧度 ×180/3.14=角度*
所以得到应该旋转角度:
angle * 180 / Math.PI * -1 - 90
Math.PI就是π
最后再给.eye设置rotate旋转就好。

完整代码:

    
Document

总结:

热烈宣布(敲锣打鼓),我的B站账号地址:https://space.bilibili.com/176586698

~泪目( Ĭ ^ Ĭ )~

其它文章:

…等

转载地址:http://ttir.baihongyu.com/

你可能感兴趣的文章
Mysql8 数据库安装及主从配置 | Spring Cloud 2
查看>>
mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件 能够使用的my.cnf配置文件
查看>>
MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
查看>>
MYSQL8.0以上忘记root密码
查看>>
Mysql8.0以上重置初始密码的方法
查看>>
mysql8.0新特性-自增变量的持久化
查看>>
Mysql8.0注意url变更写法
查看>>
Mysql8.0的特性
查看>>
MySQL8修改密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
查看>>
MySQL8修改密码的方法
查看>>
Mysql8在Centos上安装后忘记root密码如何重新设置
查看>>
Mysql8在Windows上离线安装时忘记root密码
查看>>
MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
查看>>
mysql8的安装与卸载
查看>>
MySQL8,体验不一样的安装方式!
查看>>
MySQL: Host '127.0.0.1' is not allowed to connect to this MySQL server
查看>>
Mysql: 对换(替换)两条记录的同一个字段值
查看>>
mysql:Can‘t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock‘解决方法
查看>>
MYSQL:基础——3N范式的表结构设计
查看>>
MYSQL:基础——触发器
查看>>