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

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

2023-11-02 46
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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动画
syst1_m
目录
相关文章
xiaohua616
|
16小时前
|
前端开发 JavaScript
vue 动态改变css样式
vue 动态改变css样式
xiaohua616
27 0
穆雄雄.
|
16小时前
|
前端开发 内存技术
CSS动画示例（上一篇是CSS过渡…）
CSS动画示例（上一篇是CSS过渡…）
穆雄雄.
26 1
桃李春风一杯酒
|
16小时前
|
移动开发 前端开发 JavaScript
【专栏：HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先，简述HTML5用于构建网页内容，CSS3用于描述样式。接着，分四步展示实现过程：1) 设计包含输入框和提示信息的表单结构；2) 使用CSS3创建样式，增强视觉效果；3) 使用JavaScript监听输入事件，动态验证表单并显示错误信息；4) 测试和调试确保跨平台兼容性。通过学习，开发者能掌握创建带验证功能的表单，提升用户体验。
桃李春风一杯酒
30 7
桃李春风一杯酒
|
16小时前
|
编解码 前端开发 JavaScript
【专栏：HTML与CSS实战项目篇】打造一个动态新闻网站
【4月更文挑战第30天】构建动态新闻网站，运用HTML和CSS提升编程技能和网页设计理解。项目包括首页、新闻列表页和详情页，设计简洁易用，包含顶部导航、轮播图和新闻列表。页面布局注重吸引力和易用性，色彩搭配选用冷色调为主，辅以亮色点缀。字体选择清晰易读，布局保持整洁。交互效果如轮播图、导航栏高亮和响应式设计增强用户体验。本文提供基础新闻网站构建指南，为进一步功能扩展和优化打下基础。
桃李春风一杯酒
31 5
桃李春风一杯酒
|
16小时前
|
前端开发 UED
【专栏：CSS 进阶篇】CSS3 新特性：过渡、动画与变形
【4月更文挑战第30天】CSS3的过渡、动画和变形三大特性为网页设计注入活力，创造生动丰富的用户体验。过渡提供平滑效果，常用于按钮点击等；动画实现复杂动态效果，适用于滚动字幕等；变形允许元素几何变换，如旋转和缩放。实际应用包括动态导航菜单、图片轮播和加载动画。然而，需注意浏览器兼容性、性能优化和设计平衡。掌握这些特性，将为网页设计带来更多创新可能。
桃李春风一杯酒
20 1
桃李春风一杯酒
|
16小时前
|
前端开发 JavaScript 安全
【亮剑】探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式，以实现模块化、主题化和动态样式
【4月更文挑战第30天】本文探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式，以实现模块化、主题化和动态样式。文章分为三部分：首先解释了样式传递的必要性，包括模块化、主题化和动态样式以及TypeScript集成。接着介绍了内联样式的基本用法和最佳实践，展示了一个使用内联样式自定义按钮颜色的例子。最后，讨论了使用CSS模块和TypeScript接口处理复杂样式的方案，强调了它们在组织和重用样式方面的优势。结合TypeScript，确保了样式的正确性和可维护性，为开发者提供了灵活的样式管理策略。
桃李春风一杯酒
21 0
程序员-刘华强
|
16小时前
|
XML 前端开发 JavaScript
CSS中动画、过渡、定位、浮动的作用
CSS中动画、过渡、定位、浮动的作用
程序员-刘华强
22 0
桃李春风一杯酒
|
16小时前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因，包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制，并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因，包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制，并提出优化措施：简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果，强调了性能优化对提升用户体验的重要性。在开发中，应持续关注并优化动画性能，以适应网页应用的需求。
桃李春风一杯酒
28 1
wscwdie
|
16小时前
|
前端开发 JavaScript UED
绚丽多彩的网页世界：深入探讨CSS动画的艺术与技巧
绚丽多彩的网页世界：深入探讨CSS动画的艺术与技巧
wscwdie
21 3
蓝易云
|
16小时前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器，每隔300毫秒就会动态添加一个新的像素粒子，然后通过CSS的关键帧动画（`@keyframes`）使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
蓝易云
14 0

热门文章

最新文章

  • 1
    局域网管理软件的前端设计与实现：HTML/CSS在网络拓扑展示中的应用
  • 2
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
  • 3
    《CSS 简易速速上手小册》第9章：CSS 最佳实践（2024 最新版）
  • 4
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（上）
  • 5
    前端 富文本编辑器原理——从javascript、html、css开始入门（一）
  • 6
    《CSS 简易速速上手小册》第10章：未来的 CSS（2024 最新版）
  • 7
    《CSS 简易速速上手小册》第7章：CSS 预处理器与框架（2024 最新版）
  • 8
    《CSS 简易速速上手小册》第3章：CSS 响应式设计（2024 最新版）
  • 9
    《CSS 简易速速上手小册》第5章：CSS 动画与过渡（2024 最新版）
  • 10
    【CSS进阶】巧用伪元素before和after制作绚丽效果（上）
  • 1
    CSS弹性布局justify-content的用法
    17
  • 2
    CSS中动画、过渡、定位、浮动的作用
    22
  • 3
    css样式元素的相对定位，绝对定位，固定定位等元素定位运用技巧详解
    15
  • 4
    css样式字体、文本、背景属性，盒子模型详解，轻松调教出优美的字体和网页背景色
    12
  • 5
    前端CSS样式零基础教学总结，UI、前端开发都适用
    24
  • 6
    【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
    12
  • 7
    CSS可以用于创建动态效果
    24
  • 8
    【热门话题】PostCSS：现代前端开发中的CSS增强工具
    26
  • 9
    解锁网页布局的秘密武器：探索 CSS Grid 布局的神奇魔力
    21
  • 10
    前端 富文本编辑器原理——从javascript、html、css开始入门（二）
    28

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • CSS基础教程
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考