這期內容當中小編將會給大家?guī)碛嘘P如何用HTML5+CSS3生日蛋糕的制作,文章內容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
站在用戶的角度思考問題,與客戶深入溝通,找到即墨網站設計與即墨網站推廣的解決方案,憑借多年的經驗,讓設計與互聯(lián)網技術結合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:做網站、網站設計、企業(yè)官網、英文網站、手機端網站、網站推廣、國際域名空間、網頁空間、企業(yè)郵箱。業(yè)務覆蓋即墨地區(qū)。
以一個前端開發(fā)的身份繪制一個簡單的蛋糕慶祝一下今天這個好日子吧,程序員慶生的樂趣與哀愁啊。
先發(fā)個效果圖吧
蛋糕分為三個部分,底部蛋糕,頂層蛋糕和蠟燭部分。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,慶生開發(fā)的小Demo,以后可以嘗試用Canvas畫布或SVG試著在做一下,感謝閱讀。
上述就是小編為大家分享的如何用HTML5+CSS3生日蛋糕的制作了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當前名稱:如何用HTML5+CSS3生日蛋糕的制作
鏈接URL:http://bm7419.com/article16/jjdpgg.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供網站營銷、外貿網站建設、移動網站建設、營銷型網站建設、動態(tài)網站、微信公眾號
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)