Gambarlah kue sederhana untuk merayakan hari yang baik hari ini, kesenangan dan kesedihan para programmer. Tulisannya relatif sederhana, lihatlah.
Kirim gambar efek terlebih dahulu
Kue dibagi menjadi tiga bagian, kue bawah, kue atas dan bagian lilin. Tata letak HTML juga merupakan tata letak sesuai dengan ketiga bagian ini. Yang lainnya adalah penggunaan posisi CSS dan CSS3 berputar. Lebih sederhana, saya percaya bahwa kode yang dipahami petani.
Saya tidak akan mengulangi orang lain.
Kode HTML lengkap dan kode CSS diberikan di bawah ini
<! -Radius: 5px; Top-one {Posity: Absolute; Kotak-Shadow: 0PX 0PX 20PX #3E2001;} .BIRTHY. Rotatex (60Deg); Reperation-Radial-Gradient (Circle, #783D01, #3E2001 10px, #914909 10px, putih 20px);} : Solid #3E2001; * Brenday .Bottom-One {Posisi: Absolute; Bawah -batas -30px: 1px Solid #914909; .BOTTOM-ONE. Garis: Lebar; : 5px: 1; Rotatex (60Deg); 0PX; ; .BIRTHY. FLOWER I {Relative;的文字 **. Warna #FFFFFF; 295px; Top {Width: 10px; -Radius: 5px; : Rotate (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> selamat ulang tahun </div> < /Div> <div class = Bottom-one> <Div class = Top> </div> <div class = size> </div> <div class = Bottom> <Div class = line line1> </div> </di Div> <div class = bunga> <i style = top: -20px; <i style = atas: 15px; /Div> </body> </html>Oke, demo kecil yang dikembangkan pada hari ulang tahun, Anda dapat mencoba mencobanya dengan kanvas kanvas atau SVG di masa depan, terima kasih telah membaca.
Di atas adalah semua isi artikel ini.