有趣的前端css特效——大眼仔_前端特效-优快云博客

本文详细介绍了如何使用CSS技术来绘制《怪兽电力公司》中的角色大眼仔麦克，包括恶魔角、脑袋、眼睛和嘴巴的制作过程，通过box-shadow和border-radius等属性创建出其特征和表情。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《怪兽电力公司》中的主角之一大眼仔麦克

1. 搭建框架

按照惯例，一个页面画一个效果。那么主框架就是body。在body中添加div来作为大眼仔的搭载容器。将背景色设置成稍微嫩嫩点的颜色，更加突出大眼仔的呆萌感。

代码如下：

<body>

    <div></div>

</body>

<style>

    body{
        position: relative;
        background: #eeee84; //背景色
    }

</style>

2. 绘制人物

2.1 恶魔角

首先将恶魔角作为主容器显示的内容，并以它的大小作为容器大小来屏幕居中。

div {

        position: absolute;

        left: 50%;

        top: 50%;

        width: 150px;

        height: 90px;

        margin-left: -75px;

        margin-top: -155px;

    }

细节调整：

先使用box阴影绘制一个类似天线的样子。

代码如下

box-shadow: 0 30px 3px 1px #ffe4c4, 0 18px 0 4px #555;

这里可以看到新增的阴影部分围绕在主框架div的下侧。

这是由box-shadow的属性值决定的。

box-shadow 值解析如下：

box-shadow: x轴偏移量 y轴偏移量模糊距离阴影大小颜色 inset（从外层的阴影开始改变内侧阴影）;

多个值时使用逗号连接。

那么就得到了这样一个由白色和灰黑组成的天线形状啦

要使它看起来像个角角，就要派上另外一个重要的属性了。border-raduis。

代码如下：

border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;

注: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。

得到下图

目前形状类似连接的长牛角。虽然看起来不太像恶魔角，但是不要慌。接下来继续绘制大眼仔的脑袋。

2.2 绘制大眼仔的脑袋

同样还是使用伪类元素

div:before, div:after {

    display: block;

    content: '';

    position: absolute;

}

这里将主体设置成一个椭圆形，形式鸡蛋。

    div:before { 

        width: 200px;

        height: 220px; 

        border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;

        margin-left: -100px;

        top: 45px;

        left: 50%;

        background-color: #9acd32; //设置底色

        background-repeat: no-repeat;

    }

得到一个绿毛的恶魔蛋。

大脑袋画上之后牛角瞬间就变成恶魔角啦。

下面绘制大眼及脸部轮廓阴影

background-image: 

            radial-gradient(circle,white 50%,transparent 50%),//眼珠亮点

            radial-gradient(circle,#444 50%,transparent 50%),//眼瞳中心

            radial-gradient(circle,#20b2aa 30%,rgba(34,139,34,0) 80%),//眼瞳内圈

            radial-gradient(circle,#444 50%,transparent 50%),//眼瞳外圈

            radial-gradient(ellipse,white 35%,#ddd 60%,transparent 60%),//大眼白

            radial-gradient(ellipse,#333 45%,#9acd32 55%,#9acd32 60%,transparent 60%),//眼圈美瞳线加阴影

            radial-gradient(ellipse,rgba(34,139,34,0.9) 45%,#9acd32 55%,#9acd32 60%,transparent 60%),//双眼皮褶皱

            radial-gradient(ellipse,#9acd32 55%,rgba(34,139,34,0.5) 56%,rgba(34,139,34,0) 63%),//下眼皮阴影部分

            radial-gradient(circle,rgba(34,139,34,0) 30%,rgba(34,139,34,0.6) 60%);//脸轮廓阴影

        background-size: 8px 8px,20px 20px,25px 25px,50px 50px,110px 95px,120px 110px,130px 110px,115px 95px,250px 260px;

        background-position: 53% 57px,center 59px,49% 59px,center 45px,center 25px,center 13px,center -2px,center 35px,0 -40px;

这一步绘制好以后是不是看起来就有些呆萌了呢。继续加油吧

2.2 绘制嘴巴部分

首先设置好嘴巴的大小，并居中显示。毕竟不能是个歪嘴嘛，嘻嘻


div:after {   

width: 70px;

height: 40px;

margin-left: -35px;

left: 50%;

top: 185px;

background-repeat: no-repeat;

}

然后来绘制它的小嘴巴

background: #444;//口腔内部颜色

background-image: 

radial-gradient(ellipse,white 50%,transparent 50%),//牙齿1

radial-gradient(ellipse,white 50%,transparent 50%),//牙齿2

radial-gradient(ellipse,white 50%,transparent 50%),//牙齿3

radial-gradient(ellipse,white 50%,transparent 50%),//牙齿4

radial-gradient(ellipse,rgba(255,255,255,0.2) 50%,transparent 50%);//舌头

background-size: 25px 18px,25px 18px,25px 18px,25px 18px,56px 30px;

background-position: -5px 30px,15px 32px,35px 32px,55px 28px,center 20px;

border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;

box-shadow: 0 6px 0 #9acd32, 0 15px 3px -4px rgb(34 139 34 / 90%);//下嘴唇及阴影

当当当~~~~

大眼仔完工了，成品效果如下，看起来还挺乖。嘿嘿嘿~

3.完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            position: relative;
            /* 背景色 */
            background: #eeee84;
        }

        div {
            position: absolute;
            left: 50%;
            /* top: 50%; */
            width: 150px;
            height: 90px;
            /* margin-left: -75px;
            margin-top: -155px; */
            box-shadow: 0 30px 3px 1px #ffe4c4, 0 18px 0 4px #555;
            border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
        }

        div:before,
        div:after {
            display: block;
            content: '';
            position: absolute;
        }

        div:before {
            width: 200px;
            height: 220px;
            border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
            margin-left: -100px;
            top: 45px;
            left: 50%;
            /* 设置底色 */
            background-color: #9acd32;
            background-repeat: no-repeat;
            background-image:
                /* 眼珠亮点 */
                radial-gradient(circle, white 50%, transparent 50%),
                /* 眼瞳中心 */
                radial-gradient(circle, #444 50%, transparent 50%),
                /* 眼瞳内圈 */
                radial-gradient(circle, #20b2aa 30%, rgba(34, 139, 34, 0) 80%),
                /* 眼瞳外圈 */
                radial-gradient(circle, #444 50%, transparent 50%),
                /* 大眼白 */
                radial-gradient(ellipse, white 35%, #ddd 60%, transparent 60%),
                /* 眼圈美瞳线加阴影 */
                radial-gradient(ellipse, #333 45%, #9acd32 55%, #9acd32 60%, transparent 60%),
                /* 双眼皮褶皱 */
                radial-gradient(ellipse, rgba(34, 139, 34, 0.9) 45%, #9acd32 55%, #9acd32 60%, transparent 60%),
                /* 下眼皮阴影部分 */
                radial-gradient(ellipse, #9acd32 55%, rgba(34, 139, 34, 0.5) 56%, rgba(34, 139, 34, 0) 63%),
                /* 脸轮廓阴影 */
                radial-gradient(circle, rgba(34, 139, 34, 0) 30%, rgba(34, 139, 34, 0.6) 60%);
            background-size: 8px 8px, 20px 20px, 25px 25px, 50px 50px, 110px 95px, 120px 110px, 130px 110px, 115px 95px, 250px 260px;
            background-position: 53% 57px, center 59px, 49% 59px, center 45px, center 25px, center 13px, center -2px, center 35px, 0 -40px;

        }

        div:after {
            width: 70px;
            height: 40px;
            margin-left: -35px;
            left: 50%;
            top: 185px;
            /* 口腔内部颜色 */
            background: #444;
            background-image:
                /* 牙齿1 */
                radial-gradient(ellipse, white 50%, transparent 50%),
                /* 牙齿2 */
                radial-gradient(ellipse, white 50%, transparent 50%),
                /* 牙齿3 */
                radial-gradient(ellipse, white 50%, transparent 50%),
                /* 牙齿4 */
                radial-gradient(ellipse, white 50%, transparent 50%),
                /* 舌头 */
                radial-gradient(ellipse, rgba(255, 255, 255, 0.2) 50%, transparent 50%);
            background-repeat: no-repeat;
            background-size: 25px 18px, 25px 18px, 25px 18px, 25px 18px, 56px 30px;
            background-position: -5px 30px, 15px 32px, 35px 32px, 55px 28px, center 20px;
            border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
            /* 下嘴唇及阴影 */
            box-shadow: 0 6px 0 #9acd32, 0 15px 3px -4px rgb(34 139 34 / 90%);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>