Dibuja un pastel simple para celebrar el buen día de hoy, la diversión y la tristeza de los programadores. La escritura es relativamente simple, eche un vistazo interesado.
Envía primero una imagen de efecto
El pastel se divide en tres partes, el pastel inferior, el pastel superior y la parte de la vela. El diseño de HTML también es el diseño de acuerdo con estas tres partes. El otro es el uso del posicionamiento de CSS y CSS3 gira. Es más simple, creo que los agricultores de código entienden.
No repetiré a otros.
El código HTML completo y el código CSS se dan a continuación
<! -Radius: 5px; Top-One .Bottom {Posidad: Box Shadow: 0px 0px 20px #3E2001;}. Rotatex (60deg); REPERACIÓN DE LA RADILLA (Círculo, #783D01, #3E2001 10px, #914909 10px, blanco 20px);}. : 1px Solid #3E2001; *. Abajo: -30px; .bottom-one .line {Position: Abship; : -5px: 1;}. Rotatex (60deg); : 0px; ; .Birthday. Flower I {Posición:的文字 ** Color: #ffffff; 295px; Top {Ancho: 10px; -Radius: 5px; : rotar (45deg); 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 = fondo> </div> <div class = text> feliz cumpleaños </div> < /div> <div class = Bottom-one> <div class = top> </div> <div class = size> </div> <div class = fondo> <div class = line line1> </div> </ div> <div class = flor> <i style = top: -20px; <i style = top: 15px; /Div> </body> </html>De acuerdo, la pequeña demostración desarrollada por el cumpleaños, puedes intentar probarla con lienzo de lienzo o SVG en el futuro, gracias por leer.
Lo anterior es todo el contenido de este artículo.