小摩尔来了!3分钟带你做个魔性小摩尔!
6月1号,摩尔庄园手游正式开服,小博主也是第一时间去下载了,真的太好玩了,以致于有了这篇博文,下面来看看如何实现这只可爱(魔性)的小摩尔吧!!
实现效果
哈哈哈哈哈,这只小摩尔头像是不是很魔性呢,博主尽力了!也是很可爱吧~~
实现过程
1. 定义HTML标签
face
是整个圆形脸,eyes
是两个眼睛的外层盒,nose
鼻子,mouse
嘴巴
<div class="face"><div class="eyes"><div class="eyeIn"><div class="eye"></div></div><div class="eyeIn"><div class="eye"></div></div></div><div class="nose"></div><div class="mouse"></div>
</div>
2. 绘制脸型
给定一个400px*400px
的圆形脸,背景颜色是一组浅蓝色的渐变色
background: linear-gradient(rgb(132, 222, 247), rgb(14, 84, 175))
:渐变背景色。
box-shadow:1px 2px 15px white
:添加阴影使层次分明。
.face {position: relative;display: flex;justify-content: center;align-items: center;width: 400px;height: 400px;border-radius: 50%;background: linear-gradient(rgb(132, 222, 247), rgb(14, 84, 175));box-shadow: 1px 2px 15px white;overflow: hidden;
}
3. 绘制椭圆眼睛
.eyes .eyeIn {position: relative;width: 60px;height: 90px;display: block;background: linear-gradient(135deg, rgb(82, 83, 83), rgb(14, 15, 15));margin: 0 30px;border-radius: 50%;box-shadow: 0px 0px 10px rgb(54, 161, 230);
}
4. 绘制眼珠子
眼珠的绘制采用的是在一个eye
盒子里采用伪类,来定义眼珠,这样可以通过控制eye
盒子的大小来调整眼珠的旋转位置
.eyes .eye {position: relative;top: 20px;width: 60px;height: 60px;border-radius: 50%;
}.eyes .eye::before {content: '';position: absolute;top: 50%;left: 15px;transform: translate(-50%, -50%);width: 20px;height: 30px;background-color: white;border-radius: 50%;box-shadow: 0px 0px 10px white;
}
5. 绘制嘴巴
通过伪元素来绘制牙齿,虽然很丑,但是起码有牙齿,不接受反驳!同时给嘴巴添加过渡属性,使得在鼠标移入时有个过渡的效果
.mouse {position: absolute;top: 330px;width: 70px;height: 50px;box-shadow: 0px 0px 2px rgb(106, 119, 119);border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;background: linear-gradient(rgb(244, 71, 78), rgb(201, 20, 25));transition: .5s;
}.mouse::before {position: absolute;left: 20px;content: '';width: 30px;height: 14px;background-color: rgb(245, 237, 230);border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;
}
6. 鼠标移入头像
当鼠标移入小摩尔头像时,让小摩尔嘴巴收起来,很魔性吧!
.face:hover .mouse {height: 20px;transition: .5s;
}
7. 眼睛跟随鼠标移动
这部分算是小摩尔的灵魂了,实现眼睛跟随鼠标移动的效果,属实有点诡异,仿佛有人在盯着你一样!
这里涉及到数学问题,需要实现所诉的效果,需要让鼠标当前位置,以及眼睛圆心的,眼珠圆心三点共线,因此我们先计算圆心的坐标x,y
在下面的代码中采用了getBoundingClientRect()
方法
这个方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置,返回的是一个矩形对象,包括四个属性,分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。
clientWidth
用来获取元素的宽度,一半就是圆心所在位置,这样我们就能获取到圆心的坐标(x,y)
再通过一个Math
下的atan2(X,y)
方法,返回点(x,y)
与 x坐标轴的夹角弧度制,我们通过传入e.pageX - x, e.pageY - y
也就是已眼睛圆心为坐标原点时鼠标的坐标,这样得到的弧度制就是鼠标对应到圆上的直线位置的弧度,也就是眼睛需要旋转的弧度,这样就能将眼珠旋转到相应的位置,就能实现了,在下面的代码中会发现
let rot = (rad * (180 / Math.PI) * -1) + 270
这里加270
的目的是为了从0deg
位置开始计算,而初始位置眼珠在左侧
window.addEventListener('mousemove', (e) => {let eye = document.querySelectorAll('.eye')eye.forEach(eye => {// 获取眼睛圆心坐标let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2)let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2)// 弧度let rad = Math.atan2(e.pageX - x, e.pageY - y)// 旋转的角度let rot = (rad * (180 / Math.PI) * -1) + 270// 通过旋转使得眼睛移动eye.style.transform = 'rotate(' + rot + 'deg)'})
})
可爱的小摩尔就完成了,虽然有很多不足的地方,但还是很可爱滴吧~~
小摩尔来了!3分钟带你做个魔性小摩尔!相关推荐
- python爬取4399小游戏数据_25行代码带你爬取4399小游戏数据,看下童年的游戏是否还在...
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 还记得童年的网页小游戏吗?今天带大家爬取4399小游戏网站的数据,游戏名字+链接地址 目标网 ...
- 【微信小程序控制硬件⑦ 进阶篇】动起来做一个微信小程序Mqtt协议控制智能硬件的框架,为心里全栈工程师梦想浇水。
文章目录 一.前言: 二.涉及的技术点: 三.框架的运行原理: 四.框架代码流程: 4.1 主线程: 4.2 获取设备列表显示设备,以及订阅在线的设备: 4.3 点击某设备如何实现携带此设备信息到控制 ...
- 微信小程序傻瓜制作_微信小程序模板制作:手把手教你做一个生鲜小程序
传统线下生鲜水果类商家如今正面临诸多问题,包括服务范围有限.客户源不稳定.缺少订单导致新鲜食材过期等等.新零售概念的提出,很多商家虽然懂得要打通线上渠道,但通常都是仅仅局限于普通O2O外卖平台,其实这 ...
- 以中银E路通小程序为例10分钟带你学会微信小程序的反编译
以一个简单的例子介绍下小程序反编译操作流程 实验环境 前置准备 模拟器内软件安装 获取小程序包 开始解包 导入开发者工具 补充注意事项 技术交流群 有偿解包 uniapp 逆向服务 逆向教程小程序
- 十分钟带你做一个学生管理系统
1.学生管理系统 目录 1.学生管理系统 1.2 学生管理系统实现思路: 1.3 定义学生类 1.4 主界面的代码编写 1.5添加学生代码编写 1.6查看学生代码编写 1.8 删除学生代码编写 1.9 ...
- 首页小房子图标html代码,html5及css3做的3D小房子
.z-=50;FFqHTML5中文学习网 - HTML5先行者学习网 }FFqHTML5中文学习网 - HTML5先行者学习网 FFqHTML5中文学习网 - HTML5先行者学习网 FFqHTML5 ...
- 10分钟带你学会微信小程序的反编译
以xxxxx小程序为例10分钟带你学会微信小程序的反编译 2019-11-28 12:59:26 以一个简单的例子介绍下小程序反编译操作流程 实验环境 前置准备 模拟器内软件安装 获取小程序包 开始解 ...
- “我靠做抖音小店,月入过万”:35岁前, 千万别让“拼命打工”拖垮自己!...
钱对一个人来说,有多重要? 从月薪3000拼死拼活终于升到月薪10000,可是每个月还是月光,出来工作快9年了,不仅0存款,还欠下一堆花呗信用卡的债. 不敢结婚,因为结婚意味着要支出至少十万元,更何况 ...
- 做一个微信小程序商城需要多少钱
这几年,微信小程序特别火,因为易用易传播的特性,很多企业也都都在搭建小程序商城进行宣传拓客.这也催生了网络上提供小程序服务的公司也是铺天盖地,有免费的,几十元的,卖模板的,开店的,倒卖源码的,盗版的, ...
- 小黄车凉了?1分钟带你解锁共享经济的3种新玩法
共享经济是如今国内最活跃的创新领域之一,国内共享经济的概念真正火起来并为大众所知还应该从OFO说起,随着共享单车的火爆,各种共享商品,如共享单车.共享汽车.共享充电宝.共享雨伞等如雨 ...
最新文章
- 关于document.referrer的使用需要注意
- 回复《我要阻止做java开发的男朋友去创业型公司工作吗?》园友问题
- firefox input file宽度失效
- java ioutils_java – 无法解析符号’IOUtils’
- strictmath_Java StrictMath hypot()方法与示例
- vant+cell+picker+级联选择默认选中
- vuejs粒子动画特效 npm安装插件vue-particles(particles.js) - 代码篇
- 常用SQL语句实例 11
- redis linux 删除数据结构,Redis集合数据结构和常用命令
- solr学习笔记-增加mmesg4J中文分词
- Ubuntu配置及美化篇
- 大数据第三季--Hbase(day6)-徐培成-专题视频课程
- 伟大的民族英雄霍去病
- 线上服务器老是卡,该如何优化?
- [CUDA报错] CUDA error: device-side assert triggered
- ZenCart商店 OpenzcTPL模版安装教程
- [译]GitHub应对1.28宕机事故的前前后后
- QT 选择文件,另存为文件组件
- 如何准备测试数据?用 DbUnit 和 Anthill 控制测试环境
- jdk8 HashMap底层原理