https://www.jmqz1000.com

生日蛋糕的制作方法-不过用的是HTML5+CSS3代码

“祝你生日快乐,祝你生日快乐……”,过生日有生日歌,生日蛋糕也是必不可少的,这篇文章主要为大家详细介绍了程序员利用纯HTML5+CSS3制作的生日蛋糕,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧,程序员庆生的乐趣与哀愁啊。写的比较简陋,感兴趣的看一下吧。

先发个效果图吧

蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分。HTML的布局结构也是按照这三部分布局的。另外就是使用CSS定位和CSS3的rotate,内外阴影等效果调整部分DOM元素样式。比较简单,相信码农都懂的。

不赘述其它有的没的了。

下面给出完整的的HTML代码和CSS代码


 !DOCTYPE html 
 html 
 head lang= en 
 meta charset= UTF-8 
 title /title 
 style 
 .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;

独孤九贱(5)_ThinkPHP5视频教程

ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

Peter-Zhu 2017-05-16 12:03:57


独孤九贱(4)_PHP视频教程

江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP学知网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

Peter-Zhu 2017-03-20 22:47:17


独孤九贱(1)_HTML5视频教程

《php.cn原创html5视频教程》课程特色:php学知网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

Peter-Zhu 2017-03-13 10:15:11


ThinkPHP5实战之[教学管理系统]

本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

Peter-Zhu 2017-07-24 16:48:56


PHP入门视频教程之一周学会PHP

所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

其它编程语言

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

相关文章阅读