純HTML5+CSS3制作生日蛋糕代碼
發(fā)布時(shí)間：2016-11-16 17:39:02 作者：Jeremy陽(yáng)仔 
我要評(píng)論
我要評(píng)論“祝你生日快樂(lè)，祝你生日快樂(lè)……”，過(guò)生日有生日歌，生日蛋糕也是必不可少的，這篇文章主要為大家詳細(xì)介紹了程序員利用純HTML5+CSS3制作的生日蛋糕,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
以一個(gè)前端開(kāi)發(fā)的身份繪制一個(gè)簡(jiǎn)單的蛋糕慶祝一下今天這個(gè)好日子吧，程序員慶生的樂(lè)趣與哀愁啊。寫(xiě)的比較簡(jiǎn)陋，感興趣的看一下吧。
先發(fā)個(gè)效果圖吧
蛋糕分為三個(gè)部分，底部蛋糕，頂層蛋糕和蠟燭部分。HTML的布局結(jié)構(gòu)也是按照這三部分布局的。另外就是使用CSS定位和CSS3的rotate，內(nèi)外陰影等效果調(diào)整部分DOM元素樣式。比較簡(jiǎn)單，相信碼農(nóng)都懂的。
不贅述其它有的沒(méi)的了。
下面給出完整的的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>
<div class="birthday">
<div class="container">
<div class="candle">
<div class="fire"></div>
<div class="top"></div>
<div class="body"></div>
<div class="bottom"></div>
</div>
<div class="top-one">
<div class="top"></div>
<div class="side"></div>
<div class="bottom"></div>
<div class="text">
Happy Birthday
</div>
</div>
<div class="bottom-one">
<div class="top"></div>
<div class="side"></div>
<div class="bottom">
<div class="line line1"></div>
</div>
<div 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)">樂(lè)</i>
</div>
</div>
</div>
</div>
</body>
</html>
okay，慶生開(kāi)發(fā)的小Demo，以后可以嘗試用Canvas畫(huà)布或SVG試著在做一下，感謝閱讀。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
HTML5+CSS3實(shí)現(xiàn)非常有創(chuàng)意的生日蛋糕動(dòng)畫(huà)
一款非常有創(chuàng)意的生日蛋糕動(dòng)畫(huà)，它是用svg來(lái)做的2014-05-19- 蛋糕分為三個(gè)部分，底部蛋糕，頂層蛋糕和蠟燭部分。HTML的布局結(jié)構(gòu)也是按照這三部分布局的。另外就是使用CSS定位和CSS3的rotate，內(nèi)外陰影等效果調(diào)整部分DOM元素樣式。實(shí)現(xiàn)2016-11-16
- 下面小編就為大家?guī)?lái)一篇淺談HTML5 & CSS3的新交互特性。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-19
HTML5+Canvas+CSS3實(shí)現(xiàn)齊天大圣孫悟空騰云駕霧效果
使用HTML5的canvas畫(huà)的孫悟空，CSS3畫(huà)的白云飄飄。本文給大家介紹基于HTML5+Canvas+CSS3實(shí)現(xiàn)齊天大圣孫悟空騰云駕霧效果，感興趣的朋友參考下吧2016-04-26- 這篇文章主要教大家如何利用HTML5 CSS3繪制出鋸齒狀的矩形，繪制圖形時(shí)可以用canvas標(biāo)簽，感興趣的小伙伴們可以參考一下2016-03-01
- 這篇文章主要介紹了純HTML5+CSS3制作圖片旋轉(zhuǎn)，HTML5結(jié)合CSS3 實(shí)現(xiàn)的一些動(dòng)畫(huà)特效，實(shí)現(xiàn)起來(lái)比較容易，感興趣的小伙伴們可以參考一下2016-01-12
本篇文章給大家分享基于html和CSS3制作酷炫的導(dǎo)航欄，效果非常美觀，需要的朋友可以從參考下2015-09-23檢測(cè)瀏覽器對(duì)HTML5和CSS3支持度的方法
這篇文章主要介紹了檢測(cè)瀏覽器對(duì)HTML5和CSS3支持度的方法,使用Modernizr來(lái)檢測(cè)瀏覽器對(duì)HTML5和CSS3代碼的兼容程度,需要的朋友可以參考下2015-06-25一款利用html5和css3動(dòng)畫(huà)排列人物頭像的實(shí)例演示
這篇文章主要為大家介紹了一款利用html5和css3動(dòng)畫(huà)排列人物頭像的實(shí)例演示，這款實(shí)例頁(yè)面初始時(shí)，只有中間的美女圖，然后出現(xiàn)微笑圖，緊接著出現(xiàn)小的人物圖，慢慢的以動(dòng)畫(huà)2014-12-05html5+css3之動(dòng)畫(huà)在webapp中的應(yīng)用
本文主要講訴了HTML5&CSS3在WEBAPP中的應(yīng)用，webapp模式的網(wǎng)站追求的就是一個(gè)體驗(yàn)，而體驗(yàn)優(yōu)化的一個(gè)重點(diǎn)便是動(dòng)畫(huà)，可以說(shuō)動(dòng)畫(huà)是webapp的一個(gè)亮點(diǎn)，今天我們就來(lái)談?wù)剟?dòng)畫(huà)2014-11-21
