有趣的前端css特效——毛怪沙利文

最新推荐文章于 2024-05-30 15:07:12 发布

fern_ok

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量268

点赞数

分类专栏： css 文章标签：前端 css

原文链接：https://juejin.cn/post/7067336175790325790

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

《怪兽电力公司》的主角：毛怪沙利文

1. 搭建框架

以body标签为主框架。在body中添加div来作为毛怪沙利文的搭载容器。将背景色设置成比稍毛怪沙利文颜色稍浅一些的色号。代码如下：

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

<style>
    body{
        position: relative;
        background: #a9f5f5; //背景色
    }
</style>

2. 绘制人物

2.1 小尖角

设置小尖角并屏幕居中显示。

div {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 160px;
        height: 62px; 
        margin-left: -80px;
        margin-top: -150px;  
    }

细节调整：先使用box阴影绘制一个类似天线的样子。代码如下

 box-shadow:  0 7px 7px 3px #ffe4c4, 0 15px 0 10px rgb(0 0 0 / 25%), 0 15px 0 10px #ffe4c4;

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

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

得到下图

2.2 绘制头部

使用伪类元素完成效果

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

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

 div:before { 
    
    width: 180px;
    height: 230px;
    margin-left: -90px;
    top: 30px;
    left: 50%;
    background-color: #00ced1;//设置底色  
    border-radius: 50% 50% 50% 50%/60% 60% 30% 30%;
    }

基础的毛怪头型就出来了，然后给头部加上阴影，使其更加立体。

box-shadow: 0 0 20px #009c9e, 0 10px 10px #008384, inset 0 -15px 0 13px rgb(0 0 0 / 3%)

瞬间就从平面变得立体起来了。接下来绘制面部五官。

background-image: 
    radial-gradient(ellipse,rgba(0,0,0,0.4) 50%,transparent 50%), //左边鼻孔
    radial-gradient(ellipse,rgba(0,0,0,0.4) 50%,transparent 50%), //右边鼻孔
    radial-gradient(ellipse,#00696b 50%,transparent 50%),//大鼻头
    radial-gradient(circle,white 50%,transparent 50%),//左眼珠亮点
    radial-gradient(circle,#444 50%,transparent 50%),//左眼瞳
    radial-gradient(circle,#9370db 30%,rgba(147,112,219,0) 70%),//左边眼珠眼瞳分散颜色
    radial-gradient(circle,#444 50%,transparent 50%),//左边眼珠底色
    radial-gradient(ellipse,white 30%,#ddd 60%,transparent 60%),//左眼眼白部分
    radial-gradient(ellipse,#333 45%,#48d1cc 55%,#48d1cc 60%,transparent 60%),//左侧眼球阴影
    radial-gradient(circle,white 50%,transparent 50%),//右眼珠亮点
    radial-gradient(circle,#444 50%,transparent 50%),//右眼瞳
    radial-gradient(circle,#9370db 30%,rgba(147,112,219,0) 70%),//右边眼珠眼瞳分散颜色
    radial-gradient(circle,#444 50%,transparent 50%),//右边眼珠底色
    radial-gradient(ellipse,white 30%,#ddd 60%,transparent 60%),//右眼眼白部分
    radial-gradient(ellipse,#333 45%,#48d1cc 55%,#48d1cc 60%,transparent 60%),//右侧眼球阴影
    radial-gradient(ellipse,#00abad 40%,rgba(0,206,209,0) 50%),//鼻头上阴影
    radial-gradient(ellipse,#009c9e 40%,rgba(0,206,209,0) 50%),//双眼圈阴影
    radial-gradient(ellipse,#9370db 30%,rgba(147,112,219,0) 60%),//头上紫色斑点1
    radial-gradient(ellipse,#9370db 30%,rgba(147,112,219,0) 60%),//头上紫色斑点2
    radial-gradient(circle,rgba(0,206,209,0) 35%,#009c9e 65%);//脑袋底色渐变
    background-repeat: no-repeat;
    background-size: 20px 10px,20px 10px,75px 40px,5px 5px,13px 13px,19px 19px,34px 34px,50px 45px,54px 58px,5px 5px,13px 13px,19px 19px,34px 34px,50px 45px,54px 58px,100px 40px,170px 90px,45px 40px,45px 40px,220px 350px;
    background-position: 70px 118px,90px 118px,center 95px,68px 70px,60px 71px,58px 68px,50px 60px,40px 55px,38px 47px,114px 70px,106px 71px,102px 68px,95px 60px,90px 55px,88px 47px,center 90px,center 30px,50px -17px,95px 10px,0 -80px;

呆呆的小怪兽已经接近完成啦！加油

2.2 绘制嘴巴及眉峰部分

设置好大小并居中显示。

div:after {  
    width: 70px;
    height: 15px;
    margin-left: -35px;
    left: 50%;
    top: 180px; 
    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,white 50%,transparent 50%),//牙齿5
        radial-gradient(ellipse,white 50%,transparent 50%);//牙齿6
    
    background-repeat: no-repeat;
    background-size: 16px 25px;
    background-position: -5px 7px,7px 4px,19px 7px,31px 7px,43px 4px,55px 7px;
    border-radius: 60% 60% 40% 40%/50% 50% 50% 50%;
    box-shadow: 0 6px 0 #48d1cc, 0 15px 3px -4px #009c9e, 0 -106px 6px -2px rgb(255 255 255 / 20%), -20px -114px 6px 7px #00abad, 20px -114px 6px 7px #00abad, -20px -105px 5px 5px rgb(0 0 0 / 15%), 20px -105px 5px 5px rgb(0 0 0 / 15%);//嘴巴及眉峰部分阴影

以上，小怪兽沙利文就完成啦。是不是非常可爱呢！

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>毛怪沙利文</title>
    <style>
        body {
            position: relative;
            /* 背景色 */
            background: #a9f5f5;
        }

        div {
            position: absolute;
            left: 50%;
            /* top: 50%; */
            width: 160px;
            height: 62px;
            margin-left: -80px;
            /* margin-top: -150px; */
            box-shadow: 0 7px 7px 3px #ffe4c4, 0 15px 0 10px rgb(0 0 0 / 25%), 0 15px 0 10px #ffe4c4;
            border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
        }

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

        div:before {
            width: 180px;
            height: 230px;
            margin-left: -90px;
            top: 30px;
            left: 50%;
            /* 设置底色 */
            background-color: #00ced1;
            border-radius: 50% 50% 50% 50%/60% 60% 30% 30%;
            box-shadow: 0 0 20px #009c9e, 0 10px 10px #008384, inset 0 -15px 0 13px rgb(0 0 0 / 3%);
            background-image:
                /* 左边鼻孔 */
                radial-gradient(ellipse, rgba(0, 0, 0, 0.4) 50%, transparent 50%),
                /* 右边鼻孔 */
                radial-gradient(ellipse, rgba(0, 0, 0, 0.4) 50%, transparent 50%),
                /* 大鼻头 */
                radial-gradient(ellipse, #00696b 50%, transparent 50%),
                /* 左眼珠亮点 */
                radial-gradient(circle, white 50%, transparent 50%),
                /* 左眼瞳 */
                radial-gradient(circle, #444 50%, transparent 50%),
                /* 左边眼珠眼瞳分散颜色 */
                radial-gradient(circle, #9370db 30%, rgba(147, 112, 219, 0) 70%),
                /* 左边眼珠底色 */
                radial-gradient(circle, #444 50%, transparent 50%),
                /* 左边眼白部分 */
                radial-gradient(ellipse, white 30%, #ddd 60%, transparent 60%),
                /* 左侧眼球阴影 */
                radial-gradient(ellipse, #333 45%, #48d1cc 55%, #48d1cc 60%, transparent 60%),
                /* 右眼珠亮点 */
                radial-gradient(circle, white 50%, transparent 50%),
                /* 右眼瞳 */
                radial-gradient(circle, #444 50%, transparent 50%),
                /* 右边眼珠眼瞳分散颜色 */
                radial-gradient(circle, #9370db 30%, rgba(147, 112, 219, 0) 70%),
                /* 右边眼珠底色 */
                radial-gradient(circle, #444 50%, transparent 50%),
                /* 右边眼白部分 */
                radial-gradient(ellipse, white 30%, #ddd 60%, transparent 60%),
                /* 右侧眼球阴影 */
                radial-gradient(ellipse, #333 45%, #48d1cc 55%, #48d1cc 60%, transparent 60%),
                /* 鼻头上阴影 */
                radial-gradient(ellipse, #00abad 40%, rgba(0, 206, 209, 0) 50%),
                /* 双眼圈阴影 */
                radial-gradient(ellipse, #009c9e 40%, rgba(0, 206, 209, 0) 50%),
                /* 头上紫色斑点1 */
                radial-gradient(ellipse, #9370db 30%, rgba(147, 112, 219, 0) 60%),
                /* 头上紫色斑点2 */
                radial-gradient(ellipse, #9370db 30%, rgba(147, 112, 219, 0) 60%),
                /* 脑袋底色渐变 */
                radial-gradient(circle, rgba(0, 206, 209, 0) 35%, #009c9e 65%);
            background-repeat: no-repeat;
            background-size: 20px 10px, 20px 10px, 75px 40px, 5px 5px, 13px 13px, 19px 19px, 34px 34px, 50px 45px, 54px 58px, 5px 5px, 13px 13px, 19px 19px, 34px 34px, 50px 45px, 54px 58px, 100px 40px, 170px 90px, 45px 40px, 45px 40px, 220px 350px;
            background-position: 70px 118px, 90px 118px, center 95px, 68px 70px, 60px 71px, 58px 68px, 50px 60px, 40px 55px, 38px 47px, 114px 70px, 106px 71px, 102px 68px, 95px 60px, 90px 55px, 88px 47px, center 90px, center 30px, 50px -17px, 95px 10px, 0 -80px;
        }

        div:after {
            width: 70px;
            height: 15px;
            margin-left: -35px;
            left: 50%;
            top: 180px;
            background-repeat: no-repeat;
            /* 嘴巴的颜色 */
            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%),
                /* 牙齿5 */
                radial-gradient(ellipse, white 50%, transparent 50%),
                /* 牙齿6 */
                radial-gradient(ellipse, white 50%, transparent 50%);
            background-repeat: no-repeat;
            background-size: 16px 25px;
            background-position: -5px 7px, 7px 4px, 19px 7px, 31px 7px, 43px 4px, 55px 7px;
            border-radius: 60% 60% 40% 40%/50% 50% 50% 50%;
            /* 嘴巴及眉峰部分阴影 */
            box-shadow: 0 6px 0 #48d1cc, 0 15px 3px -4px #009c9e, 0 -106px 6px -2px rgb(255 255 255 / 20%), -20px -114px 6px 7px #00abad, 20px -114px 6px 7px #00abad, -20px -105px 5px 5px rgb(0 0 0 / 15%), 20px -105px 5px 5px rgb(0 0 0 / 15%);
        }
    </style>
</head>

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

</html>