ارسم كعكة بسيطة للاحتفال باليوم الجيد اليوم ، ومتعة المبرمجين وحزنهم. الكتابة بسيطة نسبيا ، وتبدو مهتمًا.
أرسل صورة تأثير أولا
تنقسم الكعكة إلى ثلاثة أجزاء ، والكعكة السفلية ، والكعكة العلوية وجزء الشمعة. تخطيط HTML هو أيضًا تخطيط وفقًا لهذه الأجزاء الثلاثة. والآخر هو استخدام تحديد المواقع CSS وتناوب CSS3. الأمر أبسط ، وأعتقد أن مزارعي الكود يفهمون.
لن أكرر الآخرين.
فيما يلي رمز HTML الكامل ورمز CSS
<! -Radius: 5px ؛ أعلى واحد. box-shadow: 0px 20px #3E2001 ؛ ROTATEX (60DEG) ؛ REPERENT-RADIAL-RADIENT (Circle ، #783D01 ، #3E2001 ، #914909 : 1PX Solid #3E2001 ؛ * /. Brenday. القاع: حدود 1PX: .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:}. ROTATEX (60 DEREG) ؛ : 0px ؛ PX. .的文字 **. Color: Transform: Rotatex (60deg) 295px ؛ Top {READTH: REDER ؛ -Radius: 5px: : تدوير (45deg) ؛ div class = candle> <div class = fire> </viv> <div class = top> </viv> <div class = body> </viv> <div class = bottom> </viv> </viv> < div class = top-One> <div class = top> </viv> <div class = size> </viv> <div class = bottom> </viv> <div class = text> Happy Birthday </iv> < /div> <div class = Bottom-One> <div class = top> </viv> <div class = size> </viv> <div class = bottom> <div class = line line1> </viv> </ div> <div class = flower> <i style = top: -20px ؛ <i style = top: 15px ؛ /div> </body> </html>حسنًا ، العرض التوضيحي الصغير الذي تم تطويره بحلول عيد ميلاد ، يمكنك محاولة تجربته باستخدام Canvas Canvas أو SVG في المستقبل ، شكرًا لك على القراءة.
ما سبق هو كل محتويات هذا المقال.