话不多说，上代码
<!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>