我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。
💅文章概要： 各位小伙伴们大家好呀，今天是大年初五，预祝大家来年财源滚滚来！今天给大家带来的分享是纯CSS实现两只可爱兔兔过生日的场景，希望大家能喜欢！
🤟每日一言： 永远年轻，永远热泪盈眶！
前言
各位小伙伴们大家好呀，今天是大年初五，预祝大家来年财源滚滚来！今天给大家带来的分享是纯CSS实现两只可爱兔兔过生日的场景，希望大家能喜欢！
效果演示
下面是效果图的演示：
实现思路
本文主要用到了CSS中的:after和:before伪元素以及@keyframes组件来实现。
- 通过
@keyframes规则，您能够创建动画。 - @keyframes定义一个动画，并定义具体的动画效果，比如是
放大还是位移等等。 - @keyframes它定义的动画
并不直接执行，需要借助animation来运转。 - 在动画过程中，您能够多次改变这套 CSS 样式,以百分比来规定改变发生的时间，或者通过关键词
“from”和“to”，等价于0%和100%。
完整源码
由于CSS代码过长，这里只给出了HTML部分的代码。CSS部分我上传到了我的个人网站中，并且在下面的HTML部分中使用<link>标签引入了。完整源码放在了文末的码上掘金中，需要的小伙伴们可以自行查看！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Birthday Pure CSS Pen</title>
<link rel="stylesheet" href="https://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/%E5%85%94%E5%AD%90%E8%BF%87%E7%94%9F%E6%97%A5/css/style.css" />
</head>
<body style="“text-align:center;" ”="">
<div class="bar">
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>
<div class="background-4"></div>
<div class="background-5"></div>
<div class="background-6"></div>
<div class="tree-1"></div>
<div class="tree-2"></div>
<div class="tree-3"></div>
<div class="tree-4"></div>
<div class="tree-5"></div>
<div class="tree-6"></div>
<div class="tree-7"></div>
<div class="tree-8"></div>
<div class="tree-9"></div>
<div class="tree-10"></div>
<div class="tree-11"></div>
<div class="tree-12"></div>
<div class="tree-13"></div>
<div class="tree-14"></div>
<div class="tree-15"></div>
<div class="tree-16"></div>
<div class="tree-17"></div>
<div class="tree-18"></div>
<div class="tree-19"></div>
<div class="tree-20"></div>
<div class="tree-21"></div>
<div class="tree-22"></div>
<div class="tree-23"></div>
<div class="tree-24"></div>
<div class="tree-25"></div>
<div class="tree-26"></div>
<div class="tree-27"></div>
<div class="tree-28"></div>
<div class="tree-29"></div>
<div class="balcony"></div>
<div class="back-sofa">
<div></div>
<div></div>
<div></div>
<div class="coctail">
<div></div>
</div>
<div class="rabbit-1">
<div class="rabbit-1__back-leg"></div>
<div class="rabbit-1__body"></div>
<div class="rabbit-1__arm1"></div>
<div class="rabbit-1__head">
<div class="rabbit-1__ear1"></div>
<div class="rabbit-1__ear2">
<div></div>
</div>
<div class="rabbit-1__mouth">
<div></div>
</div>
<div class="rabbit-1__nose"></div>
<div class="rabbit-1__eye1"></div>
<div class="rabbit-1__eye2"></div>
</div>
<div class="rabbit-1__leg"></div>
<div class="rabbit-1__arm2"></div>
</div>
<div></div>
</div>
<div class="table">
<div></div>
<div class="lightning">
<div></div>
<div></div>
</div>
</div>
<div class="front-sofa">
<div class="rabbit-2">
<div class="rabbit-2__body"></div>
<div class="rabbit-2__arm1"></div>
<div class="rabbit-2__head">
<div class="rabbit-2__ear1">
<div></div>
</div>
<div class="rabbit-2__ear2"></div>
<div class="rabbit-2__mouth">
<div></div>
</div>
<div class="rabbit-2__nose"></div>
<div class="rabbit-2__eye1"></div>
<div class="rabbit-2__eye2"></div>
</div>
<div class="rabbit-2__leg"></div>
<div class="rabbit-2__arm2">
<div class="coctail">
<div></div>
</div>
</div>
</div>
<div></div>
</div>
</div>
</body>
</html>
码上掘金
写在最后的话
本文分享了一个兔子过生日的前端项目，希望能帮助到各位小伙伴，码文不易，还望各位大佬们多多支持哦，你们的支持是我最大的动力！
✨
👍
⭐️
✏️
