小摩尔的绘制

最近手游摩尔庄园上线了，作为热爱前端的我来说，自己要有一个属于自己的摩尔头像，那麽我们就开始绘画吧！首先要了解CSS样式和一些简单的JS，这样看下面的文章就容易很多了，我们看看效果图，需要准备怎么样的布局或者说需要准备怎么样去绘制前的HTML标签的搭建，废话不多说，开干！

1、首先时HTML的搭建

HTML搭建主要分为一个标题(可省略),小摩尔的(脸部、眼睛、眼珠子、鼻子、嘴巴、面具)

<body><h3>我的小摩尔</h3><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 class="mask"></div></div></body>

2 使用css样式进行样式的修饰

2-1 ：将body的背景设置位skyblue(可根据自己的喜好设置自己喜好的颜色)，然后就是将h3标签进行定位，定位在一个合适的位置处，修改字体颜色以及页面居中。

     body {background-color: skyblue;}h3 {width: 100px;margin: 0 auto;position: relative;top: 170px;color: #333;}

2-2：对小摩尔的脸部进行绘制，通过class类选择器获取该元素 face，设置为flex布局，通过设置宽高和阴影完成，这里注意，因为下面子元素需要浮动，会导致高度塌陷，这里overflow:hidden; 必须添加进去，解决高度塌陷的问题，其次的作用是为了给等会面具多出的部分进行隐藏。

 .face {margin: 200px auto;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;}

2-3：绘制小摩尔的眼睛(这个是小摩尔的眼睛，不是小摩尔的眼珠子绘制)，眼睛外围是一个宽60px，高90px的一个矩形，并且需要使用border-radius ：50%；将其变成一个椭圆，然后分别对左右眼进行设置。

 .eyes {position: relative;top: -70px;}.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);}.eyes .eyeIn:nth-child(1) {float: right;}.eyes .eyeIn:nth-child(2) {float: left;}

2-4：绘制小摩尔的眼珠子，通过position: relative; 定位到与眼睛中间，并且也是使用border-radius: 50%;将其设置为椭圆，再使用伪类选择在before对眼珠的中心进行调整，使用伪类选择器 content: ’ '; 该元素必须添加进去。

     .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;}

2-5 ：小摩尔的鼻子设置，这里主要记住一个比较核心的点就是鼻子颜色是渐变的颜色，需要使用background:linear-gradient（）进行颜色的混搭。

     .nose {width: 100px;height: 100px;border-radius: 50%;background: linear-gradient(rgb(244, 71, 78), rgb(201, 20, 25));box-shadow: 1px 2px 15px #666;position: absolute;top: 190px;z-index: 2;}

2-6 ：绘制嘴巴主要说一下那颗牙齿怎么设置吧，需要一个伪类before，然后对其进行绝对定位(absolute)，由于牙齿是有一点弧度的，我们需要使用 border-bottom-left-radius、border-bottom-right-radius 进行样式的设置，各添加9px；

 .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;z-index: 2;}.mouse::before {position: absolute;left: 20px;content: '';width: 30px;height: 14px;background-color: rgb(245, 237, 230);border-bottom-left-radius: 9px;border-bottom-right-radius: 9px;}

2-6 ：面具的设置，主要是通过层级(z-index)的方式将其放置嘴巴，鼻子下，这里给面具设置为 1，鼻子和嘴巴设置为 2，由于上述使用的over:hidden；所以我们设置宽430px ；高度 300px；圆角设置原来的35%，再通过绝对定位进行放置在鼻子中间合适的位置，大功告成！

 .mask {width: 430px;height: 300px;background-color: rgb(228, 217, 210);border-radius: 35%;position: absolute;z-index: 1;top: 230px;}

2-7 ：为鼠标移入事件添加一个动画事件，这个是为下述js做准备

 .face:hover .mouse {height: 20px;transition: .5s;}

2-8 ：关于js事件，我们这里需要拿到鼠标在浏览器页面的位置坐标，通过js内置的getBoundingClientRect()的letf和top知道浏览器的坐标位置，再通过clientWidth 和 clientHeight 获取眼睛的圆心坐标，为了使得鼠标在该块中处于居中状态，我们需要减去当前的坐标再除以2使其鼠标的轴心居中。(这个我解释的不清晰，可以去百度搜索一下鼠标导航器怎么实现一个道理)；

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)'})})

以上就是绘制小摩尔的全部过程，有什么不足的还请在评论区留言，我们一起讨论共同进步吧！

CSS绘制自己的小摩尔相关推荐

css绘制一个Pinia小菠萝
效果如下: pinia小菠萝分为头部和身体,头部三片叶子,菠萝为身体头部先绘制头部的盒子,将三片叶子至于头部盒子中先绘制中间的叶子,利用border-radius实现叶子的效果,可以借助工具来快 ...
记：css绘制小猪佩奇的项目及踩过的坑
下面是我项目的代码和预览链接,觉得项目好看又实用的小伙伴,随手给个star, 您的star是我最大的动力!!! 项目源码预览链接移动端实现效果的展示,点击download下载观看这一项目的主题的 ...
使用CSS绘制几何图形（圆形、三角形、扇形、菱形等
在实际开发中,会出现一些小三角,用icon又不方便,于是我使用css绘制,并进行记录 1.在使用伪类时,要加position: absolute;,当我没有加的时候,圆形会变成椭圆形 2.伪类中使用p ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
用CSS绘制最常见的40种形状和基本图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
纯CSS 绘制三角形气泡框
1.用纯css绘制带三角型的气泡框,不适合用图片 2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分. 例子:先画一个三角吧 .dr{width:0px; ...
css绘制不规则图形
CSS绘制不规则图形在实际开发中,经常会遇到绘制图形(图标)的需求,比如:箭头图表.不规则图形.规则图形: 常见方法对于图形的实现,可以大体上分为几种做法 (1) 背景图片,请UI小姐姐帮你吧-- ...
css选择器顺序的小技巧
在线演示本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...
css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
【MATLAB】基本绘图 ( 绘制多图 | 设置图形对话框在 Windows 界面的位置和大小 | 在一个图形上绘制多个小图形 )
文章目录一.绘制多图 1.绘制多图 2.代码示例二.设置图形对话框在 Windows 界面的位置和大小三.在一个图形上绘制多个小图形一.绘制多图 1.绘制多图存在一种绘图情况 , 需要同时展 ...

CSS绘制自己的小摩尔

小摩尔的绘制

1、首先时HTML的搭建

2 使用css样式进行样式的修饰

CSS绘制自己的小摩尔相关推荐

最新文章

热门文章