AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

手把手用 CSS 绘制一个忽闪忽闪的可爱小幽灵

2022-10-18 232
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 通过几个 div 的拼接，和 css 的样式加成，便可制作出这样一个可爱的小幽灵。下面一起看下制作过程吧。

网络异常，图片无法展示
|


前排先放效果图，通过几个 div 的拼接，和 css 的样式加成，便可制作出这样一个可爱的小幽灵。下面一起看下制作过程吧。

结构确定

首先看下我们的小幽灵主要分为两部分，一个是他的身体，一个是他周围的装饰物。身体主要由眼睛 👀、身体、脚组成。即可确定如下 dom 结构。

<div class="ghost-box">
    <div class="ghost">
        <div class="ghost-eyes">
            <div class="eye-left"></div>
            <div class="eye-right"></div>
        </div>
        <div class="ghost-footer">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
复制代码

然后我们再在 box 中添加几个 div 用作装饰，再添加一个 div 用作小幽灵底部的小光阴，增加一些趣味。

<div class="symbol"></div>
<div class="symbol"></div>
<div class="symbol"></div>
<div class="symbol"></div>
<div class="symbol"></div>
<div class="symbol"></div>
<div class="ghost-shadow"></div>
复制代码

样式

然后我们再确定下小幽灵的身体颜色和眼睛颜色，以及整个背景色、光影的颜色。

:root {
    --color-eyes: white;
    --color-body: #d4e8ee;
    --color-background: #131a24;
    --color-shadow: rgb(230, 211, 211);
    background-color: var(--color-background);
}
复制代码

因为幽灵 👻 一般夜间出没，所以背景选择暗色，给个淡淡的蓝色作为幽灵身体的颜色，光影用淡淡的颜色，眼睛就偷懒直接弄成白色了。

.ghost-box {
    padding: 15px 25px 25px;
    width: 150px;
    position: relative;
    box-sizing: border-box;
}
.ghost-box * {
    box-sizing: border-box;
}
.ghost-box .ghost {
    background: var(--color-body);
    width: 100px;
    border-radius: 100px 100px 0 0;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 20px;
    height: 130px;
    background-clip: content-box;
}
.ghost-box .ghost .ghost-eyes {
    position: absolute;
    left: 50%;
    top: 30%;
    height: 12px;
    width: 70px;
    transition: all 0.05s ease-out;
}
.ghost-box .ghost .ghost-eyes .eye-left,
.ghost-box .ghost .ghost-eyes .eye-right {
    width: 12px;
    height: 12px;
    background: var(--color-eyes);
    border-radius: 50%;
    margin: 0 10px;
    position: absolute;
}
.ghost-box .ghost .ghost-eyes .eye-left {
    left: 0;
}
.ghost-box .ghost .ghost-eyes .eye-right {
    right: 0;
}
.ghost-box .ghost .ghost-footer {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.ghost-box .ghost .ghost-footer div {
    flex-grow: 1;
    position: relative;
    top: -10px;
    height: 20px;
    border-radius: 100%;
    background-color: var(--color-body);
}
.ghost-box .ghost .ghost-footer div:nth-child(2n) {
    top: -12px;
    margin: 0 0px;
    border-top: 15px solid var(--color-background);
    background: transparent;
}
复制代码

通过上面一段简单的样式，即可画出小幽灵的身体、眼睛、脚等部位，脚为了做出波浪的感觉，采用了与背景色相同的颜色来做遮挡。

然后通过如下样式，绘制出圆、十字、叉号几种样式。

.ghost-box .symbol:nth-child(1) {
    opacity: 0.2;
}
.ghost-box .symbol:nth-child(1):before,
.ghost-box .symbol:nth-child(1):after {
    content: '';
    width: 12px;
    height: 4px;
    background: var(--color-body);
    position: absolute;
    border-radius: 5px;
    bottom: 65px;
    left: 0;
}
.ghost-box .symbol:nth-child(1):before {
    transform: rotate(45deg);
}
.ghost-box .symbol:nth-child(1):after {
    transform: rotate(-45deg);
}
.ghost-box .symbol:nth-child(2) {
    position: absolute;
    left: -5px;
    top: 30px;
    height: 18px;
    width: 18px;
    border: 4px solid;
    border-radius: 50%;
    border-color: var(--color-body);
    opacity: 0.2;
}
.ghost-box .symbol:nth-child(3) {
    opacity: 0.2;
}
.ghost-box .symbol:nth-child(3):before,
.ghost-box .symbol:nth-child(3):after {
    content: '';
    width: 12px;
    height: 4px;
    background: var(--color-body);
    position: absolute;
    border-radius: 5px;
    top: 5px;
    left: 40px;
}
.ghost-box .symbol:nth-child(3):before {
    transform: rotate(90deg);
}
.ghost-box .symbol:nth-child(3):after {
    transform: rotate(180deg);
}
.ghost-box .symbol:nth-child(4) {
    opacity: 0.2;
}
.ghost-box .symbol:nth-child(4):before,
.ghost-box .symbol:nth-child(4):after {
    content: '';
    width: 15px;
    height: 4px;
    background: var(--color-body);
    position: absolute;
    border-radius: 5px;
    top: 10px;
    right: 30px;
}
.ghost-box .symbol:nth-child(4):before {
    transform: rotate(45deg);
}
.ghost-box .symbol:nth-child(4):after {
    transform: rotate(-45deg);
}
.ghost-box .symbol:nth-child(5) {
    position: absolute;
    right: 5px;
    top: 40px;
    height: 12px;
    width: 12px;
    border: 3px solid;
    border-radius: 50%;
    border-color: var(--color-body);
    opacity: 0.2;
}
.ghost-box .symbol:nth-child(6) {
    opacity: 0.2;
}
.ghost-box .symbol:nth-child(6):before,
.ghost-box .symbol:nth-child(6):after {
    content: '';
    width: 15px;
    height: 4px;
    background: var(--color-body);
    position: absolute;
    border-radius: 5px;
    bottom: 65px;
    right: -5px;
}
.ghost-box .symbol:nth-child(6):before {
    transform: rotate(90deg);
}
.ghost-box .symbol:nth-child(6):after {
    transform: rotate(180deg);
}
复制代码

再通过 box-shadow 绘制出小幽灵的光影：

.ghost-box .ghost-shadow {
    height: 20px;
    box-shadow: 0 50px 15px 5px var(--color-shadow);
    border-radius: 50%;
    margin: 0 auto;
}
复制代码

通过高度压扁，设置 border-radius，制造一个椭圆形，然后通过 box-shadow 制造出立体光圈的感觉。

动画

为了让小幽灵更活灵活现，我们简单的为其添加一些动画：

@keyframes ghost-float {
    0%,
    to {
        opacity: 0;
        transform: translateY(5px) scale(0.9);
    }
    50% {
        opacity: 1;
        transform: translateY(15px) scale(1);
    }
}
.ghost-box .ghost {
    animation: ghost-float 8s ease-in-out infinite;
}
复制代码

先给小幽灵增加一些小动画，忽隐忽现、上下移动，加上一些细微的大小变化。

@keyframes ghost-shadow {
    0%,
    to {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}
.ghost-box .ghost-shadow {
    animation: ghost-shadow 8s ease-in-out infinite;
}
复制代码

给光影也加上类似的动画，注意要和小幽灵动画保持同步，毕竟光阴是小幽灵带来的。

@keyframes ghost-eyes {
    0%,
    to {
        left: 0%;
    }
    40%,
    60% {
        left: 30%;
    }
}
.ghost-box .ghost .ghost-eyes {
    animation: ghost-eyes 5s ease-in-out infinite;
}
复制代码

然后给眼睛一点移动动画，让小幽灵有活着的感觉。点睛之笔 👀

最后我们给周围的小装饰也来点动画：

@keyframes shine {
    0%,
    to {
        box-shadow: #fff 0 0 5px;
        opacity: 1;
    }
    50% {
        box-shadow: #fff 0 0;
        opacity: 0;
    }
}
.ghost-box .symbol:nth-child(1) {
    opacity: 0.2;
    animation: shine 4s ease-in-out 3s infinite;
}
复制代码

然后给不同的小装饰给不同的动画时常，可以让动画随机感更强，看起来更有趣、真实。

总结

好了，以上就是小幽灵的绘制过程了，有兴趣的同学也可以对小幽灵进行改造，换个皮肤什么的。

文章标签：
JavaScript
前端开发
关键词：
CSS幽灵
CSS绘制
嘿嘿不务正业
目录
相关文章
秋刀鱼不做梦
|
5月前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
秋刀鱼不做梦
60 5
汪末末
|
前端开发 开发者
CSS必学：元素之间的空白与行内块的幽灵空白问题
CSS空白现象就是非常常见的问题之一。虽然它已经被发现很久，但仍然有许多新手和经验丰富的开发者们忽略了它对页面布局的影响。我们一起来看看吧！
汪末末
225 4
CSS必学：元素之间的空白与行内块的幽灵空白问题
朝阳39
|
4月前
|
移动开发 前端开发 HTML5
css 幽灵空白节点
css 幽灵空白节点
朝阳39
32 0
syst1_m
|
前端开发
CSS 漂浮幽灵动画动态展示特效
CSS 漂浮幽灵动画动态展示特效
syst1_m
78 0
叶一一
|
前端开发 容器
「CSS畅想」七夕寄情，我绘制了一副双色莲花图
用技术实现梦想，用梦想打开创意之门。七夕寄情，我用CSS绘制了一副双色莲花图。
叶一一
197 1
「CSS畅想」七夕寄情，我绘制了一副双色莲花图
叶一一
|
前端开发 JavaScript 容器
【CSS畅想】萤星漫舞，我用CSS绘制了一个属于夏日的回忆
用技术实现梦想，用梦想打开创意之门。萤星漫舞，我用CSS绘制了一个属于夏日的回忆
叶一一
231 1
杭州-田迪生
|
前端开发 JavaScript 内存技术
css动画animation绘制向四周扩散的圆圈
css动画animation绘制向四周扩散的圆圈
杭州-田迪生
1415 0
chokcoco
|
前端开发 JavaScript Serverless
在 CSS 中使用三角函数绘制曲线图形及展示动画
在 CSS 中使用三角函数绘制曲线图形及展示动画
chokcoco
369 0
在 CSS 中使用三角函数绘制曲线图形及展示动画
张中华
|
前端开发
CSS绘制三角形
CSS绘制三角形
张中华
126 0
CSS绘制三角形
战场小包
|
前端开发
使用CSS绘制一支口红
使用CSS绘制一支口红
战场小包
166 0
使用CSS绘制一支口红

热门文章

最新文章

  • 1
    Css基本样式————字体
  • 2
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    纯CSS3实现宽屏二级下拉菜单
  • 6
    CSS伪元素实现的3D按钮
  • 7
    CSS3实现时间轴效果
  • 8
    05.javascript访问CSS
  • 9
    CSS3中的选择器
  • 10
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    65
  • 2
    技术心得：xpath、CSS定位方法
    41
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    153
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    68
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    139
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    43
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    66
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    147
  • 9
    使用HTML和CSS创建响应式表格
    161
  • 10
    常见的css优化方案都有那些
    48

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 3D动画的菜谱式灯光与云渲染
  • 低代码开发师（初级）实战教程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云OSS设置跨域访问