Zeichnen Sie einen einfachen Kuchen, um heute den guten Tag zu feiern, den Spaß und die Trauer der Programmierer. Das Schreiben ist relativ einfach, schauen Sie sich interessiert.
Senden Sie zuerst ein Effektbild
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, #783D01, #3E2001 10px, #914909 10px, weiß 20px); : 1PX Solid #3E2001; * / .Brenday .Bottom-eins {Position: Absolut; Bottom: -30px; .Bottom-eins : -5px: 1; Rotatex (60DEG); : 0px; ; .Birthday .Flower i {Position: Relativ;的文字 **/ .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; <i style = top: 15px; /Div> </body> </html>Okay, die kleine Demo, die vom Geburtstag entwickelt wurde, können Sie versuchen, sie in Zukunft mit Leinwand oder SVG zu versuchen. Vielen Dank für das Lesen.
Das oben genannte ist der Inhalt dieses Artikels.