纯CSS表情符号星级评分小部件_htmlcss评分对应表情-CSDN博客

本文链接：https://blog.csdn.net/weixin_41556756/article/details/111826499

今天，在此博客中，你将学习如何仅使用HTML和CSS创建Emoji 评分系统。在下一篇文章中，我会分享如何在JavaScript中创建“自定义Emoji滑动验证”。

你可能知道，星级评定是一个评分问题或小部件，可为人们提供应用程序，产品，服务或其他获得好评的评分。星星数范围可以从5到10星。在此设计中[Emoji 评级]，有一个白色的大盒子，上面放着表情符号，星星和等级编号。当你对特定星星进行评分时，表情符号会根据你的评分而变化，底部文字和评分编号也会更改。
在这里插入图片描述

以下是源代码：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji 表情包评分</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
  <div class="wrapper">
    <input type="radio" name="rate" id="star-1">
    <input type="radio" name="rate" id="star-2">
    <input type="radio" name="rate" id="star-3">
    <input type=&