Não há muita bobagem, vamos mostrar as renderizações primeiro:
O bolo é dividido em três partes, o bolo inferior, o bolo superior e a parte da vela. O layout do HTML também é um layout de acordo com essas três partes. O outro é o uso do posicionamento CSS e o CSS3 girando. É mais simples, acredito que os agricultores de código entendem.
Não vou repetir os outros.
O código HTML completo e o código CSS são fornecidos abaixo
<! -Radius: 5px; Top-One .Bottom {Posity: Absoluto; BOX-SHADO: 0px 0px 20px #3E2001;} .Birthday. Giratex (60DEG); Repertência-radial (círculo, #783D01, #3E2001 10px, #914909 10px, branco 20px);} : 1px sólido #3e2001; * / .Brendy .Bottom-One {Posição: Absoluto; Inferior: -30px; .Bottom-One. Line {Posição: Absoluto; : -5px: 1;}. Girarx (60DEG); : 0px; PX; .birthday .flower I {Posição: relativa;的文字 **/ .Birthday .TOP-ONE. cor: #ffff; 295px; Top {Width: 10px; -Radius: 5px; : girar (45deg); div class = Candle> <div class = fogo> </div> <div class = top> </div> <div class = body> </div> div class = top-one> <div class = top> </div> <div class = size> </div> <div class = bottom> </div> <div class = text> feliz aniversário </div> < /div> <div class = Bottom-one> <div class = top> </div> <div class = size> </div> div> <div class = flor> <i style = top: -20px; <i style = top: 15px; /Div> </body> </html>O acima é o bolo de aniversário HTML5+CSS3 (o código é fácil de entender) introduzido pelo editor. com o tempo. Muito obrigado pelo seu apoio ao site VevB Wulin!