纯CSS五角星评分

话不多说，上代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        @font-face {font-family: "iconfont";
          src: url('iconfont.eot?t=1592787814950');
          src: url('iconfont.eot?t=1592787814950#iefix') format('embedded-opentype'),
          url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAN8AAsAAAAAB3AAAAMuAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCUIIrATYCJAMMCwgABCAFhG0HPht5BsiemjxpYhkNIcgaalvAoHysCKr9Pnt29xAdkkQsHyQVdiyvvktYSCzPOsJEuJwOGvHmtfvKQs5Kn9UaFTnBd+ZlssahIvV6sLzrBJ3c8VseQSiBJtqWSBLFGmBVyu/zXE5vis9vZxFlOOawvfReFGCCge1tUS/wuISxYeyClnibQLNBGewOymsbgKvCXBSIu0baC1wzPqWhPTQK9RU7i3itTmN6kn6AV8Hv4z8LV5K6zFx57HoZAoW/5v7IDofVIbjkEfTTRcD2kTEPKMSVytg5DlFhnoNm1ebYXF+vCGmq9P+KQKdZ6q0/PJIg6pmtrWAaeZKL0jsyiT9huOrWDOqj0k1ADbt6h54UC3b63uVp+05FNK/fFNx0aNfp68notP0hzZsvr7gY1rh2b1Dj3qsnd6Q0rNkA9mw8ceXO5Jl1ywMb9jQP7wE9ScvPHdoW0bxZV9u2/fKYjYmNey9u3ZLSsEf7tC0HzmT5xaxiupyQlZlLG4mkvxNUu/088GV3e/7kw6O1owsFU+3dL58H3J4Nuq2/Lm0cjgxZWVv04uTKiaKzEXcnituWdwPNmwHftGdmEaY8vRteGOC9ohaX/DGpssP3yJfNex9H3kZU4effqGZwr/+2r3WfRu5l/l0f2mcy6UNcbdTHNQDV5ck9/1fpWPK13/GYj1X0yzs2vlIK+KnjJDB1awYaJTrrX76nRAPxJs1o+nNRrBp1RiJbHBhJQA1PqmCmur0e7uq7wVJo1JcgaTCArNE4Wdh51GmxgHqNttFsTsX+Fj04B1GaMGseIHQ6jqTdd2SdnpKFfYU6/T6jXmc4oNmZ6DmxxWQY3fc57hUYwb5haJSYjdhB4R6212Hab+nlaWPANWGuGNNQq9LkyxXYhvkUa5QBqhOCQMKZFZaD+7DFwqDMmQlLQmUQQs5Wq0nVi1QSswJ3+zisl4AhUJ9hkJGEsSHecMG98P06GNXPohdvUFRVm2Ccwjg6pKWi6UBW2GydFLfyjGIApSMIBERwjBVUDiKYxSowkFw9zQSTCCqGATlZNjUaRLraVMs7rC9Qy/owJ+dIkaNoemy0USeodY28AAAAAA==') format('woff2'),
          url('iconfont.woff?t=1592787814950') format('woff'),
          url('iconfont.ttf?t=1592787814950') format('truetype'), 
          url('iconfont.svg?t=1592787814950#iconfont') format('svg');
        }
        
        .iconfont {
          font-family: "iconfont" !important;
          font-size: 16px;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        .icon-xingxing:before {
          content: "e62b";
        }
        input {
          -webkit-appearance: none;
          border: none; 
          outline: none; 
          cursor: pointer; 
        }
        .star-content input[name="star"] {
          font-family: "iconfont";
          font-size: 30px;
          padding-right: 10px;
        }
        
        .star-content input[name="star"]::after {
          content: "e62b";
          color: var(--nocheck);
          transition: color .4s ease;
        }
        input[name="star"]:checked::after,
        input[name="star"]:checked~input[name="star"]::after {
          content: "e62b";
          color: var(--hascheck);
        }
        :root {
          --hascheck: #ffa822;
          --nocheck: #999;
        }
        .star-content {
          display: flex;
          flex-flow: row-reverse;
        }
        
        input[name="star"] {
          margin-right: 10px;
          transition: transform .2s ease;
        }
        input[name="star"]:hover::after {
          content: "e62b";
          color: var(--hascheck);
        }
        input[name="star"]:hover~input[name="star"]::after {
          content: "e62b";
          color: var(--hascheck);
        }
        
        input[name="star"]:checked,
        input[name="star"]:hover {
          transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="star-content">
      <input type="radio" name="star">
      <input type="radio" name="star">
      <input type="radio" name="star">
      <input type="radio" name="star">
      <input type="radio" name="star">
    </div>
    <script>
        
    </script>
</body>
</html>