CSS 笑脸实现 - 使用伪元素创建简单表情符号

\u003cp\u003e可以使用 CSS 的伪元素和伪类来实现一个笑脸。\u003c/p\u003e\n\n\u003cp\u003eHTML 代码：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u003cdiv class\u003d"smiley-face"\u003e\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eCSS 代码：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e.smiley-face {\n width: 200px;\n height: 200px;\n border: 3px solid black;\n border-radius: 50%;\n background-color: yellow;\n position: relative;\n}\n\n.smiley-face::before {\n content: "" ;\n display: block;\n width: 50px;\n height: 50px;\n border: 3px solid black;\n border-radius: 50%;\n background-color: white;\n position: absolute;\n top: 30%;\n left: 30%;\n}\n\n.smiley-face::after {\n content: "" ;\n display: block;\n width: 50px;\n height: 50px;\n border: 3px solid black;\n border-radius: 50%;\n background-color: white;\n position: absolute;\n top: 30%;\n right: 30%;\n}\n\n.smiley-face::before, .smiley-face::after {\n transform: rotate(45deg);\n}\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003e这段代码会创建一个黄色的圆形笑脸，两个白色的圆形眼睛，眼睛使用了伪元素 ::before 和 ::after 来实现。通过调整 top 和 left 属性来调整眼睛的位置，通过 transform 属性来旋转眼睛使其呈现斜角。\u003c/p\u003e