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

CSS 漂浮幽灵动画动态展示特效

2023-11-02 78
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS 漂浮幽灵动画动态展示特效

最近看了一部动画片，名叫《寻梦环游记》;影片将亡灵世界的展现的绚丽多彩，温暖有情，远不是我们一般想象的死者世界充满了黑暗、冰冷、阴森、恐怖等的感觉。 骷髅可以很可爱，也可以载歌载舞、互助友爱，可以有美丽的烟火表演，甚至还有绚烂如虹的花瓣桥通向人间，已经逝去的人们可以在亡灵节那天通过这座桥去探望还记得他们的生者和家人。 这是多美好的愿望和想象呢！如果死去了也能有如此美好的世界，死亡应该就不会让人那么恐惧了吧？ 不过想生活在如此美好的亡灵世界，电影给出了一个前提设定，那就是世上还有人记得你；如果你想通过花瓣桥去人间探望，还需要有人在亡灵节那天把你的照片拿出来祭奠。 离去的事实固然令人悲伤，但被人惦念、叫人怀想的那份情感却让人觉得美好温暖。

死亡永远不会是爱的终点

被遗忘才是死亡的开端

让我感兴趣的是卡哇伊的幽灵，于是，我决定自己制造一个幽灵

幽灵展示！

image.png

是不是特别帅，简直就和我本人一样，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

接下来就是代码展示咯

html


<div class='ghost'>
    <div class='eyes'></div>
    <div class='mouth'>
        <div class='mouth__part'>
            <div class='bubble'></div>
            <div class='bubble'></div>
        </div>
        <div class='mouth__part'>
            <div class='bubble low'></div>
        </div>
        <div class='mouth__part'></div>
        <div class='mouth__part'></div>
        <div class='mouth__part'>
            <div class='bubble low'></div>
            <div class='bubble low'></div>
        </div>
        <div class='mouth__part'>
            <div class='bubble'></div>
            <div class='bubble'></div>
        </div>
        <div class='blood-drips'>
            <div class='blood-drips__drip'></div>
        </div>
    </div>
    <div class='arms'>
        <div class='arm'></div>
        <div class='arm'></div>
    </div>
</div>
<div class='shadow'></div>
css
  1. 先设置body的背景颜色


body {
    background: #1f1f1f;
}

image.png

  1. 设置身体的轮廓


.ghost {
    display: block;
    width: 40vh;
    height: 40vh;
    background: #f2d5fa;
    border-radius: 50%;
    will-change: transform;
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-animation: bob 2s;
    animation: bob 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}

image.png

  1. 设置幽灵的两个小眼睛


.eyes:after, .eyes:before {
    content: "";
    display: block;
    width: 2.5vh;
    height: 4vh;
    position: absolute;
    top: 7vh;
    left: 12vh;
    background: #7963e3;
    border-radius: 50%;
    will-change: margin;
    -webkit-animation: mbob 2s;
    animation: mbob 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}
.eyes:before {
    transform: rotate(20deg);
}
.eyes:after {
    left: auto;
    right: 12vh;
    transform: rotate(-20deg);
}

  1. 画个小嘴巴


.mouth {
    display: block;
    width: 13vh;
    height: 5.25vh;
    margin: 15vh auto;
    margin-left: 20.5vh;
    position: relative;
    -webkit-animation: bob 2s;
    animation: bob 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}
.mouth__part {
    display: block;
    width: 3vh;
    height: 5vh;
    border: 0vh solid #7963e3;
    margin: -0.5vh;
    float: left;
    position: relative;
    background: #7963e3;
    border-radius: 50%;
    overflow: hidden;
    transform: rotate(0deg);
}
.mouth__part:nth-child(2),
.mouth__part:nth-child(5) {
    margin-top: -0.85vh;
}
.mouth__part:nth-child(3),
.mouth__part:nth-child(4) {
    margin-top: -1vh;
}

哈哈哈哈哈哈哈哈，歪嘴战神

image.png

  1. 嘴巴里加点小口水


.bubble {
    display: block;
    width: 1vh;
    height: 1vh;
    background: #78d9e1;
    position: absolute;
    bottom: -0.3vh;
    left: 0;
    border-radius: 50%;
    margin-top: 100px;
    -webkit-animation: bob-bot 2s;
    animation: bob-bot 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}
.bubble.low {
    bottom: -0.5vh;
    left: 0.3vh;
}
.bubble:nth-child(2) {
    display: block;
    width: 2vh;
    height: 2vh;
    bottom: -1vh;
    left: 0.5vh;
}
.bubble:nth-child(2).low {
    bottom: -1.5vh;
}
.blood-drips__drip {
    display: block;
    width: 1vh;
    height: 1vh;
    background: #78d9e1;
    position: absolute;
    bottom: 0.2vh;
    right: 2vh;
    border-radius: 50%;
    -webkit-animation: drip 1s ease-in;
    animation: drip 1s ease-in;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

image.png

  1. 把小手装上去


.arm {
    display: block;
    width: 5vh;
    height: 8vh;
    position: absolute;
    top: 16vh;
    left: 0vh;
    background: #f2d5fa;
    border-radius: 50%;
    transform-origin: center top;
}
.arm:nth-child(1) {
    transform: rotate(30deg);
    border-right: 1vh solid #c3b9f3;
    -webkit-animation: left-arm-wobble 1s ease-in;
    animation: left-arm-wobble 1s ease-in;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}
.arm:nth-child(2) {
    transform: rotate(-30deg);
    border-left: 1vh solid #c3b9f3;
    left: auto;
    right: 0vh;
    -webkit-animation: right-arm-wobble 1s ease-in;
    animation: right-arm-wobble 1s ease-in;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}

image.png

  1. 把地下的影子添加上去


.shadow {
    display: block;
    width: 30vh;
    height: 6vh;
    background: #fddc4f;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 68vh;
    -webkit-animation: shadow 2s;
    animation: shadow 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}

image.png

ok，此时还有点小瑕疵，接下来等我加上动画就完全ok，在动画的基础下，浅浅的修改了初始位置


@-webkit-keyframes shadow {
    from {
        -webkit-transform: scale(0.5);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@keyframes shadow {
    from {
        transform: scale(0.5);
    }
    to {
        transform: scale(1);
    }
}
@-webkit-keyframes bob {
    from {
        -webkit-transform: translateY(-70%) translateX(-50%);
    }
    to {
        -webkit-transform: translateY(-50%) translateX(-50%);
    }
}
@keyframes bob {
    from {
        transform: translateY(-70%) translateX(-50%);
    }
    to {
        transform: translateY(-50%) translateX(-50%);
    }
}
@-webkit-keyframes mbob {
    from {
        margin-top: 0;
    }
    to {
        margin-top: -1vh;
    }
}
@keyframes mbob {
    from {
        margin-top: 0;
    }
    to {
        margin-top: -1vh;
    }
}
@-webkit-keyframes bob-bot {
    from {
        -webkit-transform: translateY(0vh) rotate(0deg);
    }
    to {
        -webkit-transform: translateY(-0.5vh) rotate(360deg);
    }
}
@keyframes bob-bot {
    from {
        transform: translateY(0vh) rotate(0deg);
    }
    to {
        transform: translateY(-0.5vh) rotate(360deg);
    }
}
@-webkit-keyframes drip {
    from {
        -webkit-transform: translateY(0vh);
    }
    to {
        -webkit-transform: translateY(5vh);
    }
}
@keyframes drip {
    from {
        transform: translateY(0vh);
    }
    to {
        transform: translateY(5vh);
    }
}
@-webkit-keyframes left-arm-wobble {
    from {
        -webkit-transform: rotate(10deg);
    }
    to {
        -webkit-transform: rotate(30deg);
    }
}
@keyframes left-arm-wobble {
    from {
        transform: rotate(10deg);
    }
    to {
        transform: rotate(30deg);
    }
}
@-webkit-keyframes right-arm-wobble {
    from {
        -webkit-transform: rotate(-10deg);
    }
    to {
        -webkit-transform: rotate(-30deg);
    }
}
@keyframes right-arm-wobble {
    from {
        transform: rotate(-10deg);
    }
    to {
        transform: rotate(-30deg);
    }
}

image.png

此时，我的小幽灵就画完了，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈，就到这吧

最后请不要忘记每一个对你来说重要的人，请记住你的每一位家人、每一位友人，无论你们曾经的回忆中包含着的是欢乐还是伤痛！

文章标签：
前端开发
关键词：
CSS动画
CSS幽灵
CSS动态
CSS动画动态
syst1_m
目录
相关文章
派大鑫的工作室
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
66 2
光明顶阳顶天
|
23天前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解，并采取适当的策略和方法。通过不断的实践和优化，你可以在各种浏览器上创造出流畅、美观且兼容的动画效果，为用户带来更好的体验。在实际开发中，要密切关注浏览器的发展动态，及时掌握最新的兼容性技巧和解决方案，以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
光明顶阳顶天
98 58
CamilleKing
|
2天前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下，优化 CSS3 动画的性能？
如何在不牺牲动画效果的前提下，优化 CSS3 动画的性能？
CamilleKing
6 1
chnjames
|
28天前
|
前端开发 JavaScript API
探索 CSS Houdini：轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能，展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力，实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API，并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例，展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后，还演示了如何将这种 3D 翻卡效果集成到公司网站中，提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性，推动了前端开发迈向新的高度。
chnjames
24 0
探索 CSS Houdini：轻松构建酷炫的 3D 卡片翻转动画
六卿
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果，包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
六卿
44 0
JS配合CSS3实现动画和拖动小星星小Demo
Li370234940
|
1月前
|
前端开发
CSS 动画介绍及语法
CSS 动画介绍及语法
Li370234940
27 0
蓝易云
|
3月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣，可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数，或者光标颜色等，来适应特定的设计需求。使用这种动态元素，增强网站的互动性和用户体验，同时也为网站增添了一抹活泼的风格。
蓝易云
72 5
游客fz577umxdejsg
|
3月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
游客fz577umxdejsg
201 2
游客fz577umxdejsg
|
3月前
|
前端开发
CSS动画霓虹灯闪烁效果
CSS动画霓虹灯闪烁效果
游客fz577umxdejsg
55 2
lvbb66
|
3月前
|
前端开发 JavaScript 开发者
css过渡与动画
css过渡与动画
lvbb66
42 0

热门文章

最新文章

  • 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定位方法
    40
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    153
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    68
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    138
  • 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创建响应式表格
    160
  • 10
    常见的css优化方案都有那些
    48

    • 相关课程

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

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 3D动画的菜谱式灯光与云渲染
  • 360°全景视频播放器的实现原理

    • 相关实验场景

    更多
  • CSS基础教程
  • 前端开发基础3：CSS3常见显示属性
  • 图表样式智能美化工具
    • 下一篇
    阿里云OSS设置跨域访问