使用HTML5和CSS3實(shí)現(xiàn)生日蛋糕的制作

來(lái)源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 18:48:26

使用HTML5和CSS3實(shí)現(xiàn)生日蛋糕的制作

“祝你生日快樂(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代碼。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀“祝你生日快樂(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代碼。

這篇文章主要介紹了關(guān)于使用HTML5和CSS3實(shí)現(xiàn)生日蛋糕的制作，有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下

“祝你生日快樂(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>
 <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)">樂(lè)</i>
 </p>
 </p>
 </p>
 </p>
</body>
</html>

okay，慶生開(kāi)發(fā)的小Demo，以后可以嘗試用Canvas畫(huà)布或SVG試著在做一下，感謝閱讀。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

使用HTML5和CSS3實(shí)現(xiàn)生日蛋糕的制作

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：蛋糕生日蛋糕實(shí)現(xiàn)

熱門(mén)焦點(diǎn)

使用HTML5和CSS3實(shí)現(xiàn)生日蛋糕的制作

使用HTML5和CSS3實(shí)現(xiàn)生日蛋糕的制作

使用HTML5和CSS3實(shí)現(xiàn)生日蛋糕的制作

最新推薦

猜你喜歡

熱門(mén)推薦