纯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>
标签：star,name,评分,iconfont,content,五角星,input,font,CSS 来源： https://www.cnblogs.com/GeniusZ/p/13175434.html