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