制作生日蛋糕的方法和材料.
发布网友
发布时间：2022-04-22 02:52
共2个回答
懂视网
时间：2022-05-14 06:02
“祝你生日快乐，祝你生日快乐……”，过生日有生日歌，生日蛋糕也是必不可少的，这篇文章主要为大家详细介绍了程序员利用纯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;
}
/**
** 底层的
**/
.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;
}
</style>
</head>
<body>
<p class="birthday">
<p class="container">
<p class="candle">
<p class="fire"></p>
<p class="top"></p>
<p class="body"></p>
<p class="bottom"></p>
</p>
<p class="top-one">
<p class="top"></p>
<p class="side"></p>
<p class="bottom"></p>
<p class="text">
Happy Birthday
</p>
</p>
<p class="bottom-one">
<p class="top"></p>
<p class="side"></p>
<p class="bottom">
<p class="line line1"></p>
</p>
<p class="flower">
<i style="top:-20px;transform: rotateY(50deg)">生</i>
<i style="top:15px;transform: rotateY(30deg)">日</i>
<i style="top:15px;transform: rotateY(30deg)">快</i>
<i style="top:-20px;transform: rotateY(50deg)">乐</i>
</p>
</p>
</p>
</p>
</body>
</html>okay，庆生开发的小Demo，以后可以尝试用Canvas画布或SVG试着在做一下，感谢阅读。
热心网友
时间：2022-05-14 03:10
工具：电饭锅一个
材料：鸡蛋四个、面粉一饭勺、苏打粉（酵母粉）一小勺、生粉两小勺、色拉油、白砂糖、葡萄干若干
制作：先将鸡蛋打散在一个容器里，边搅拌边加入白砂糖（根据个人口味轻重放）、面粉、生粉、苏打粉、少量色拉油、葡萄干、直至将鸡蛋和其它作料搅拌至很稀的面糊状（如果面粉加多了估计就稠了，做出来的就不松软了）
将电饭锅里用刷子刷上一层色拉油，为了做出的蛋糕不沾锅，容易倒出。将搅拌好的蛋糕糊倒入，盖好盖子，将电饭锅打到煮饭档，直至听到电饭锅跳到保温档为止，不过，此时不可以立即出锅哦，还要继续保温十分钟让其充分的膨胀，十分钟后就可以出来了，用一个大盘子倒扣在电饭锅上，一个喷喷香的美味葡萄干蛋糕就出锅了，味道不比烤箱做出的差哦，而且有简单方便，很适合没有烤箱的朋友们制作哦。
用微波炉做蛋糕
准备的材料：
低筋面粉
80g
泡打粉
5g
鸡蛋
4只
牛奶
60ml
白糖
80g
油
少许
首先，蛋黄和蛋白分开。面粉和泡打粉混合好。注意，做蛋糕一定要用低筋面粉，高筋面粉不适合做蛋糕。然后，将蛋黄、牛奶、40克白糖，少许油混合，搅拌均匀。将面粉和泡打粉混合好后，可以用打蛋的刷稍微搅一下，这样可以消除面粉的颗粒。
然后倒进蛋黄混合液中，搅拌均匀。接着开始打蛋白了。先打一会，看到起一些泡泡了，加入40克白糖，也可以分2次加白糖，继续打，一直打到蛋白的泡沫发起来了，而且比较细才可以。蛋白一定要打到半胶质的样子，即是不会再流动。然后，将蛋白分2到3次加入蛋黄混合液中，加一次就搅拌均匀，然后再加。
完全搅拌均匀后。（正确的搅拌方法是，上下或者左右搅拌，动作不要过猛）。准备好一个微波炉的容器，里面四周抹上油。
将完全混合好的粉浆倒进容器……
注意，装粉浆的时候一定别装太满了，要留一定的高度给它膨胀。把装了粉浆的容器在桌上震几下，这样可以把大的气泡赶出来，然后就可以进微波炉了！
想加热均匀一些的话，就先在下面垫一双竹或者是木的筷子，然后把容器放在筷子上。
微波炉调至中高档火力，5分钟左右。5分钟后打开来看，要是还不够熟就再多加热1分钟。完成后，拿出来，倒扣在盘子上就ok啦！
想要做什么造型的，可以直接在外面抹上奶油、巧克力等。不做造型的就直接切开来吃。另外，做的时候还可以在里面加一些葡萄干。
