Nicht viel Unsinn, zeigen wir Ihnen zuerst die Renderings:
Der Kuchen ist in drei Teile unterteilt, der untere Kuchen, der obere Kuchen und den Kerzenteil. Das Layout von HTML ist auch nach diesen drei Teilen Layout. Die andere ist die Verwendung von CSS -Positionierung und CSS3 drehen. Es ist einfacher, ich glaube, dass Code -Landwirte verstehen.
Ich werde andere nicht wiederholen.
Der vollständige HTML -Code und der CSS -Code sind unten angegeben
<! -Radius: 5px; Top-One .Bottom {Posität: Absolut; Box-Shadow: 0PX 0PX 20px #3E2001;} .Birthday .top- Ein. Rotatex (60DEG); 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; .Bottom-eins : -5px: 1; Rotatex (60DEG); : 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 {Breite: 100%; Farbe: #ffffff; 295px; Top {Breite: 10px; -Radius: 5px; : rotate (45deg); div class = candle> <div class = fire> </div> <div class = top> </div> <div class = body> </div> <div class = boden> </div> </div> < div class = top-one> <div class = top> </div> <div class = size> </div> <div class = boden> </div> <div class = text> Alles Gute zum Geburtstag </div> < /div> <div class = boden-one> <div class = top> </div> <div class = size> </div> <div class = boden> <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; /Div> </body> </html>Das oben genannte HTML5+CSS3 -Produktionsgeburtstagstorte (der Code ist leicht zu verstehen), ich hoffe, es wird für alle hilfreich sein. rechtzeitig. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!