纯HTML5+CSS3制作生日蛋糕(代码易懂)
建站知识 2021-07-02 23:00www.168986.cn长沙网站建设
废话不多说,先给大家展示下效果图
蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分。HTML的布局结构也是按照这三部分布局的。就是使用CSS定位和CSS3的rotate,内外阴影等效果调整部分DOM元素样式。比较简单,相信码农都懂的。
不赘述其它有的没的了。
狼蚁网站SEO优化给出完整的的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 .-one{ position: absolute; width:280px; height: 280px; bottom: 200px; left:160px; } .birthday .-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 .-one .{ position: absolute; width:280px; height: 280px; :-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 .-one .side{ position: absolute; :95px; width:280px; height: 70px; border:1px solid #3e2001; border--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 .{ position: absolute; width:400px; height: 400px; :-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; :100px; width:400px; height: 130px; border:1px solid #3e2001; border--width: 0px; border-bottom-width: 0px; background: #3e2001; z-index: 2; } / 底层的文字 / .birthday .flower{ position: relative; text-align: justify; z-index: 9; :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 .-one .text{ width:100%; text-align: center; position: absolute; :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; :130px; z-index: 9; } .birthday .candle .body{ width:10px; height:70px; margin:0px auto; background: red; border-bottom-width: 0px; } .birthday .candle .{ width:10px; height: 10px; border-radius: 5px; transform: rotateX(60deg); position: relative; :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=""></div> <div class="body"></div> <div class="bottom"></div> </div> <div class="-one"> <div class=""></div> <div class="side"></div> <div class="bottom"></div> <div class="text"> Happy Birthday </div> </div> <div class="bottom-one"> <div class=""></div> <div class="side"></div> <div class="bottom"> <div class="line line1"></div> </div> <div class="flower"> <i style=":-20px;transform: rotateY(50deg)">生</i> <i style=":15px;transform: rotateY(30deg)">日</i> <i style=":15px;transform: rotateY(30deg)">快</i> <i style=":-20px;transform: rotateY(50deg)">乐</i> </div> </div> </div> </div> </body> </html>
以上所述是长沙网络推广给大家介绍的纯HTML5+CSS3制作生日蛋糕(代码易懂),希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
上一篇:html5 div布局与table布局详解
下一篇:HTML5制作表格样式
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML