CSS绘制自己的小摩尔

最新推荐文章于 2025-05-23 14:10:47 发布

三杯温开水

最新推荐文章于 2025-05-23 14:10:47 发布

阅读量691

点赞数 4

分类专栏：学习案例文章标签： css html 定位 js

本文链接：https://blog.csdn.net/weixin_47024018/article/details/117677468

版权

学习案例专栏收录该内容

5 篇文章

订阅专栏

小摩尔的绘制

最近手游摩尔庄园上线了，作为热爱前端的我来说，自己要有一个属于自己的摩尔头像，那麽我们就开始绘画吧！首先要了解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)'
        })
    })