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

2020-03-24 16:06:06

字體：大中小

來源：轉載

供稿：網友

“祝你生日快樂，祝你生日快樂……”，過生日有生日歌，生日蛋糕也是必不可少的，這篇文章主要為大家詳細介紹了程序員利用純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項目的最佳選擇?！禫eVb.com獨孤九賤(5)－ThinkPHP5視頻教程》課程以ThinkPHP5最新版本為例，從最基本的框架常識開始，將...