Dessinez un simple gâteau pour célébrer la bonne journée aujourd'hui, le plaisir et le chagrin des programmeurs. L'écriture est relativement simple, jetez un coup d'œil intéressé.
Envoyez d'abord une image d'effet
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>D'accord, la petite démo développée par l'anniversaire, vous pouvez essayer de l'essayer avec Canvas Canvas ou SVG à l'avenir, merci pour la lecture.
Ce qui précède est tout le contenu de cet article.