오늘 좋은 날을 축하하기 위해 간단한 케이크를 그리십시오. 프로그래머의 재미와 슬픔. 글은 비교적 간단합니다.
효과 사진을 먼저 보내십시오
케이크는 바닥 케이크, 상단 케이크 및 촛불 부분의 세 부분으로 나뉩니다. HTML의 레이아웃은이 세 부분에 따라 레이아웃입니다. 다른 하나는 CSS 포지셔닝 및 CSS3 회전의 사용입니다. 더 간단합니다. 저는 농민들이 이해한다고 생각합니다.
나는 다른 사람들을 반복하지 않을 것입니다.
전체 HTML 코드 및 CSS 코드는 다음과 같습니다.
<html> <html> <meta charset = width : 600px; -5px;} / ** **. 겨울 : 280px; Box-Shadow : 0px 20px #3e2001. Rotatex (60deg); Reperation-radial-gradient (Circle, #783d01, #914909 10px, white} : 1px 고체 #3E2001; * /. BOTTOM-ONE {400px; 바닥 : 1px 고체 #914909; BOTTOM-ONE : -5px : birthday -ontop {4 : 400px; rotatex (60deg); : 0px; Border-Bottom-width : 0px; Z-index; px; Birthday的文字 **. #ffffff; 295px; z-index. 상단 : 10px; -5px; : 회전 (45deg); #ffd507; -shadow : 0px 0px #ffff00,} </style> </head> <div class = <div class = container> < 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> 생일 축하합니다 </div> < /div> <div class = 맨 아래 -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 : rotatey (30deg)> Quick </i> <I Style = top : rotatey (50deg); /div> </body> </html>좋아요, 생일이 개발 한 작은 데모는 앞으로 캔버스 캔버스 나 SVG로 시도해 볼 수 있습니다. 읽어 주셔서 감사합니다.
위는이 기사의 모든 내용입니다.