Draw a simple cake to celebrate the good day today, the fun and sorrow of programmers. The writing is relatively simple, take a look interested.
Send an effect picture first
The cake is divided into three parts, the bottom cake, the top cake and the candle part. The layout of HTML is also layout according to these three parts. The other is the use of CSS positioning and CSS3 Rotate. It's simpler, I believe that code farmers understand.
I won't repeat others.
The complete HTML code and CSS code are given below
<! Doctype html> <html> <head lang = EN> <meta charset = UTF-8> </tictle> <Style> .Container {width: 600px; 600px; margin: 0px a uto; Background: #FaFafa; Border-Radius: 5px; Position: Relative;} / ** ** Top layer ** / .bringhday .top-one {positive: width: 280px; heig ht: 280px; bottom: 200px; left : 160px;}. BITHDAY .top-One .bottom {posity: absolute; width: 280px; height: 280px; bottom: -30px; 1px solid #3E2001; s: 140px; transform: rotatex (60deg); Z-index: 4; background: #3E2001; Box-shadow: 0px 0px 20px #3E2001;} .bIRTHDAY .top- One .top {posted: width: 280px; height: 28. 0px; TOP: -50px; border- radius: 140px; background: #ffffff; Transform: Rotatex (60Deg); Box-shadow: 2px 2px 20px #b7b7b7; z-index: 6; Background: -Radial-Gradient (Circle, #783D01, #3E2001 10px, #914909 10px, White 20px); Background: -moz-Reperation-Radial-Gradient (Circle, #783d01, #3E2001 10px, #914909 10px, White 20px);}. y .top-one .side {position: absolute; top: 95px; width: 280px; height: 70px; border: 1px solid #3e2001; border-top-width: 0px; border-bottom-width: 0px; background: #F Ffff; Z-index: 5; background: #3e2001;} / ** ** The bottom layer of ** / .brenday .bottom-One {position: absolute; width: 400px; height: 400px; bottom: 0px; left:} .bIRTHDAY .b OTTOM-One .bottom {Position: AbSolute; width: 400px; height: 400px; bottom: -30px; border: 1px solid #914909; border-radius: 200px; rotatex (60deg); -Shadow: 2px 2px 20px #914909; z- Index: 1; Background: #3E2001; Overflow: Hidden;} .bringhdy .bottom-One .line {position: absolute; width: 400px; height: 400px; : 200px; z-index: 1;} .birthDay .bottom-one .line1 {bottom: 30px; border: 5px solid #783d01; left: -5px: 1;} .bIRTHDAY-One .top {posted: 4: 4 00px; Height: 400px ; TOP: -100px; Border: 1px solid #3E2001; Border-Radius: 200px; Background: #ffffff; Transform: Rotatex (60Deg); 01; Box-Shadow: Inset 0px 0px 20px #3e2001;} .birthDay .bottom-One .side {position: absolute; TOP: 100px; width: 400px; height: 130px; 1px solid #3E2001; Th: 0px; Border-Bottom-Width: 0px; Background: #3E2001; Z-index: 2;} / ** ** The bottom layer of text ** /. BIRTHDAY .flower {position: related: text-align: justify; px; FONT-SIZE: 32px; FONT-FAMILY: Helvetica Neue, Noto Sans CJK SC, Source Han Sans CN; COLOR: #FFFFFFF; ontent:; Display: Inline-Block ; Position: Relative; Width: 100%;} .birthday .flower I {Position: Relative; Width: 80px; LINE-Height: 80px; Display: Border-Ra dius: 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);} / ** ** candle ** / .bringhday {width: 10px ; Height: 80px; Margin: 0px Auto; Position: absolute; left: 295px; TOP: 130px; Z-index: 9;} .bIRTHDAY .Body {width: 10px; height: 70 px; Margin: 0px Auto; Background : Red; Border-Bottom-Width: 0px;} .birthDay .candle .top {width: 10px; height: 10px; border-radius: 5px; TRANSFORM: Rotatex (60Deg); Ative; Top: 5px; Background: Red;} .birthDay .candle .bottom {width: 10px; height: 10px; border-radius: 5px; transform: Rotatex (60Deg); group: red; box-shadow: 1px 1px 10px Red;} .birthDay .candle .Fire {posity: absolute; width: 6px; height: 6px; left: 2px; transform: rotate (45Deg); Background: #ffd507; -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 = size > </div> <div class = bottom> </div> <div class = text> Happy Birthday </div> </div> <div class = bottom-one> <div class = top> </div> < div class = size> </div> <div class = bottom> <div class = line line1> </div> </div> <div class = flower> <i style = top: -20px; transform (50dey (50Dey G )> Sheng </i> <i style = top: 15px; transform: rotatey (30Deg)> Day </i> <i style = top: 15px; transform: rotatey (30Deg)> Quick </i> <I style = Top: -20px; Transform: Rotatey (50Deg)> Le </i> </DIV> </DIV> </DIV> </Body> </html>Okay, the little demo developed by the birthday, you can try to try it with Canvas canvas or SVG in the future, thank you for reading.
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.