这篇文章主要介绍了关于使用HTML5和CSS3实现生日蛋糕的制作，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
“祝你生日快乐，祝你生日快乐……”，过生日有生日歌，生日蛋糕也是必不可少的，这篇文章主要为大家详细介绍了程序员利用纯HTML5+CSS3制作的生日蛋糕,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧，程序员庆生的乐趣与哀愁啊。写的比较简陋，感兴趣的看一下吧。
先发个效果图吧
蛋糕分为三个部分，底部蛋糕，顶层蛋糕和蜡烛部分。html的布局结构也是按照这三部分布局的。另外就是使用css定位和css3的rotate，内外阴影等效果调整部分dom元素样式。比较简单，相信码农都懂的。
不赘述其它有的没的了。
下面给出完整的的HTML代码和CSS代码
.birthday .container{ width:600px; height:600px; margin:0px auto; background: #fafafa; border-radius:5px; position: relative; } /** ** 顶层的 **/ .birthday .top-one{ position: absolute; width:280px; height: 280px; bottom: 200px; left:160px; } .birthday .top-one .bottom{ position: absolute; width:280px; height: 280px; bottom:-30px; border:1px solid #3e2001; border-radius: 140px; transform: rotateX(60deg); z-index: 4; background: #3e2001; box-shadow: 0px 0px 20px #3e2001; } .birthday .top-one .top{ position: absolute; width:280px; height: 280px; top:-50px; border-radius: 140px; background: #FFFFFF; transform: rotateX(60deg); box-shadow: 2px 2px 20px #b7b7b7; z-index: 6; background: -webkit-repeating-radial-gradient(circle, #783d01, #3e2001 10px, #914909 10px,white 20px); background: -moz-repeating-radial-gradient(circle, #783d01, #3e2001 10px,#914909 10px,white 20px); } .birthday .top-one .side{ position: absolute; top:95px; width:280px; height: 70px; border:1px solid #3e2001; border-top-width: 0px; border-bottom-width: 0px; background: #FFFFFF; z-index: 5; background: #3e2001; } /** ** 底层的 **/ .birthday .bottom-one{ position: absolute; width:400px; height: 400px; bottom: 0px; left:100px; } .birthday .bottom-one .bottom{ position: absolute; width:400px; height: 400px; bottom:-30px; border:1px solid #914909; border-radius: 200px; transform: rotateX(60deg); box-shadow: 2px 2px 20px #914909; z-index: 1; background: #3e2001; overflow: hidden; } .birthday .bottom-one .line{ position: absolute; width:400px; height: 400px; border-radius: 200px; z-index: 1; } .birthday .bottom-one .line1{ bottom: 30px; border:5px solid #783d01; left:-5px; z-index: 1; } .birthday .bottom-one .top{ position: absolute; width:400px; height: 400px; top:-100px; border:1px solid #3e2001; border-radius: 200px; background: #FFFFFF; transform: rotateX(60deg); z-index: 3; background: #783d01; box-shadow: inset 0px 0px 20px #3e2001; } .birthday .bottom-one .side{ position: absolute; top:100px; width:400px; height: 130px; border:1px solid #3e2001; border-top-width: 0px; border-bottom-width: 0px; background: #3e2001; z-index: 2; } /** ** 底层的文字 **/ .birthday .flower{ position: relative; text-align: justify; z-index: 9; top:200px; font-size: 32px; font-family: "Helvetica Neue", "Noto Sans CJK SC", "Source Han Sans CN"; color:#FFFFFF; font-weight: bold; } .birthday .flower:after{ content:""; display:inline-block; position: relative; width:100%; } .birthday .flower i{ position: relative; width:80px; line-height: 80px; display: inline-block; border-radius: 50%; border:2px solid #783d01; text-align: center; } /** ** 顶层的文字 **/ .birthday .top-one .text{ width:100%; text-align: center; position: absolute; top:165px; z-index: 9; margin:0px auto; font-size: 30px; color:#FFFFFF; transform: rotateX(60deg) skew(10deg,20deg); } /** ** 蜡烛 **/ .birthday .candle{ width:10px; height:80px; margin:0px auto; position: absolute; left:295px; top:130px; z-index: 9; } .birthday .candle .body{ width:10px; height:70px; margin:0px auto; background: red; border-bottom-width: 0px; } .birthday .candle .top{ width:10px; height: 10px; border-radius: 5px; transform: rotateX(60deg); position: relative; top:5px; background: red; } .birthday .candle .bottom{ width:10px; height: 10px; border-radius: 5px; transform: rotateX(60deg); position: relative; bottom:5px; background: red; box-shadow: 1px 1px 10px red; } .birthday .candle .fire{ position: absolute; width:6px; height: 6px; left:2px; transform: rotate(45deg); background: #ffd507; box-shadow: 0px 0px 20px #ffff00, 2px 2px 10px red; }
Happy Birthday
生 日 快 乐
okay，庆生开发的小Demo，以后可以尝试用Canvas画布或SVG试着在做一下，感谢阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
立即学习“前端免费学习笔记（深入）”；
相关推荐：
如何使用jQuery和HTML5实现手机摇一摇的换衣特效
用html5的63行代码实现贪吃蛇游戏
以上就是使用HTML5和CSS3实现生日蛋糕的制作的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610231.html
微信扫一扫 
支付宝扫一扫 
