/* 首先,大家要创建猪的身体 */ .pig-body { width: 100px; height: 60px; background-color: pink; border-radius: 50% 50% 0 0; position: relative; top: 80px; left: 100px; } /* 接下来,大家要画出猪的脸 */ .pig-face { width: 40px; height: 40px; background-color: pink; border-radius: 50%; position: relative; top: 40px; left: 40px; } /* 大家还需要画出猪的耳朵 */ .pig-ear { width: 30px; height: 20px; background-color: pink; border-radius: 50% 50% 0 0; position: relative; top: -15px; left: 25px; transform: rotate(-45deg); } /* 然后,大家需要画出猪的眼睛和鼻子 */ .pig-eye { width: 10px; height: 10px; background-color: black; border-radius: 50%; position: relative; top: 10px; left: 10px; } .pig-nose { width: 10px; height: 10px; background-color: black; border-radius: 50%; position: relative; top: 20px; left: 15px; } /* 最后,大家需要画出猪的尾巴 */ .pig-tail { width: 20px; height: 20px; background-color: pink; border-radius: 50% 50% 50% 0; position: relative; top: -5px; left: 80px; transform: rotate(45deg); }
以上是大家的CSS代码,大家将其应用于一个HTML页面中,就能看到大家画出的小猪了!
通过掌握CSS画图的技巧,大家能够创造出各种有趣的图案和形状,让大家的网页更加生动有趣。