Нарисуйте простой торт, чтобы отпраздновать хороший день сегодня, веселье и печаль программистов. Письмо относительно простое, посмотрите на заинтересованность.
Сначала отправьте изображение эффекта
Торт разделен на три части: нижний пирог, верхний торт и часть свечи. Расположение HTML также является макетом в соответствии с этими тремя частями. Другим является использование позиционирования CSS, а CSS3 вращается. Это проще, я считаю, что кодовые фермеры понимают.
Я не буду повторять других.
Полный HTML -код и код CSS приведены ниже
<! -Радис: 5px; Топ-один. Box-Shadow: 0px 0px 20px #3E2001;}. Rotatex (60Deg); РАЗДЕЛИТЕЛЬНОСТЬ : 1px #3E2001; *. Brenday. Внизу: 30px; .bottom-One .line {position: absolute; width: 400px; height: 400px; : 200px; z-index: 1;} .birthDay .bottom-one .line1 {bottom: 30px; border: 5px solid #783d01; left : -5px: 1;}. Rotatex (60Deg); : 0px; ; . Благодаря.的文字 **. День День. Цвет: #ffffff; 295px; Верхняя часть: 10px; -Радис: 5px; : utate (45Deg); div class = candle> <div class = fire> </div> <div class = top> </div> <div class = body> </div> <div class = снизу> </div> </div> < div class = top-one> <div class = top> </div> <div class = size> </div> <div class = внизу> </div> <div class = text> С днем рождения </div> < /div> <div class = bottom-one> <div class = top> </div> <div class = size> </div> <div class = внизу> <div class = line line1> </div> </ div> <div class = flower> <i style = top: -20px; <i style = top: 15px; /Div> </body> </html>Хорошо, небольшая демонстрация, разработанная на день рождения, вы можете попробовать попробовать его с Canvas Canvas или SVG в будущем, спасибо за чтение.
Выше всего содержимое этой статьи.