CSS3是一种互联网标准,它可以帮助我们实现许多有趣的动画和效果。在本文中,我们将使用CSS3来画一个呆萌猫!
/* 创建一个div,设置宽度和高度为80像素 */ div { width: 80px; height: 80px; position: relative; } /* 给div添加一张猫的图片,来作为背景 */ div:before { content: ""; background-image: url(cat.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* 现在我们将添加两只大眼睛 */ div:after { content: ""; width: 20px; height: 20px; background-color: white; border-radius: 50%; position: absolute; top: 20px; left: 15px; Box-shadow: 10px 0 0 white,-10px 0 0 white; } /* 给大眼睛添加一只眼球 */ div:after:before { content: ""; width: 10px; height: 10px; background-color: #222; border-radius: 50%; position: absolute; top: 3px; left: 3px; }
让我们来解释一下这些代码。首先,我们创建了一个div,并设置宽度和高度为80像素。我们给这个div添加了一张猫的图片,来作为背景图片,然后把这个图片绝对定位在div里面。接着,我们添加了两只大眼睛,在这里使用伪元素 :after 和 :before 来创建。我们给这些元素设置了相应的宽度、高度、top 和 left 属性,让它们出现在正中央。最后,我们给眼睛元素添加了一个黑色的圆圈,来模拟眼球。