Pas beaucoup de bêtises, montrons d'abord les rendus:
Le gâteau est divisé en trois parties, le gâteau inférieur, le gâteau supérieur et la partie de la bougie. La disposition de HTML est également la disposition en fonction de ces trois parties. L'autre est l'utilisation du positionnement CSS et de la rotation du CSS3. C'est plus simple, je crois que les agriculteurs de code comprennent.
Je ne répéterai pas les autres.
Le code HTML complet et le code CSS sont donnés ci-dessous
<! -Radius: 5px; Le top-un. Box-Shadow: 0px 0px 20px # 3e2001;}. Rotatex (60Deg); REPERATION-RADIAL-GRADIAL (Circle, # 783D01, # 3E2001 10px, # 914909 10px, blanc 20px);}. : 1px solide # 3e2001; *. en bas: -30px; . : -5px: 1;}. Rotatex (60Deg); : 0px; ; .的文字 **. Couleur: #ffffff; 295px; Top {largeur: 10px; -Radius: 5px; : rotation (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 = bottom> </div> <div class = text> joyeux anniversaire </div> < / div> <div class = inférieur-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; <i style = top: 15px; / Div> </ body> </html>Ce qui précède est le gâteau d'anniversaire de production Pure HTML5 + CSS3 (le code est facile à comprendre) par l'éditeur. dans le temps. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!