<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
box-sizing: border-box;
}
.container {
background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/concrete-texture.png");
display: flex;
flex-wrap: wrap;
height: 100vh;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.rating {
display: flex;
width: 100%;
justify-content: center;
overflow: hidden;
flex-direction: row-reverse;
height: 150px;
position: relative;
}
.rating-0 {
filter: grayscale(100%);
}
.rating>input {
display: none;
}
.rating>label {
cursor: pointer;
width: 40px;
height: 40px;
margin-top: auto;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
background-size: 76%;
transition: .3s;
}
.rating>input:checked~label,
.rating>input:checked~label~label {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}
.rating>input:not(:checked)~label:hover,
.rating>input:not(:checked)~label:hover~label {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d8b11e' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}
.emoji-wrapper {
width: 100%;
text-align: center;
height: 100px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.emoji-wrapper:before,
.emoji-wrapper:after {
content: "";
height: 15px;
width: 100%;
position: absolute;
left: 0;
z-index: 1;
}
.emoji-wrapper:before {
top: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0) 100%);
}
.emoji-wrapper:after {
bottom: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0) 100%);
}
.emoji {
display: flex;
flex-direction: column;
align-items: center;
transition: .3s;
}
.emoji>svg {
margin: 15px 0;
width: 70px;
height: 70px;
flex-shrink: 0;
}
#rating-1:checked~.emoji-wrapper>.emoji {
transform: translateY(-100px);
}
#rating-2:checked~.emoji-wrapper>.emoji {
transform: translateY(-200px);
}
#rating-3:checked~.emoji-wrapper>.emoji {
transform: translateY(-300px);
}
#rating-4:checked~.emoji-wrapper>.emoji {
transform: translateY(-400px);
}
#rating-5:checked~.emoji-wrapper>.emoji {
transform: translateY(-500px);
}
.feedback {
max-width: 370px;
background-color: #fff;
width: 100%;
padding: 30px;
border-radius: 8px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
box-shadow: 0 4px 30px rgba(0, 0, 0, .05);
}
</style>
<body>
<div class="container">
<div class="feedback">
<div class="rating">
<input type="radio" name="rating" id="rating-5">
<label for="rating-5"></label>
<input type="radio" name="rating" id="rating-4">
<label for="rating-4"></label>
<input type="radio" name="rating" id="rating-3">
<label for="rating-3"></label>
<input type="radio" name="rating" id="rating-2">
<label for="rating-2"></label>
<input type="radio" name="rating" id="rating-1">
<label for="rating-1"></label>
<div class="emoji-wrapper">
<div class="emoji">
<svg class="rating-0" style="width: 70px;height: 70px;margin: 15px 0;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7485"><path d="M512 0C260.042105 0 53.894737 206.147368 53.894737 458.105263V898.245614c0 39.522807 32.336842 71.859649 71.859649 71.859649h121.74821c74.734035 36.307088 165.941895 53.894737 264.497404 53.894737s189.763368-17.587649 264.497404-53.894737H898.245614c39.522807 0 71.859649-32.336842 71.859649-71.859649V458.105263C970.105263 206.147368 763.957895 0 512 0z" fill="#6E5847" p-id="7486"></path><path d="M69.506246 537.043088A458.374737 458.374737 0 0 0 53.894737 655.719298C53.894737 908.719158 259.00014 1024 512 1024S970.105263 908.719158 970.105263 655.719298C970.105263 410.354526 763.418947 209.488842 520.982456 197.614035h-17.964912c-242.436491 11.874807-449.122807 212.740491-449.122807 458.105263C53.894737 908.719158 259.00014 1024 512 1024S970.105263 908.719158 970.105263 655.719298" fill="#FDC794" p-id="7487"></path><path d="M233.54386 485.052632a134.736842 107.789474 90 1 0 215.578947 0 134.736842 107.789474 90 1 0-215.578947 0Z" fill="#FFFFFF" p-id="7488"></path><path d="M287.438596 485.052632a80.842105 53.894737 90 1 0 107.789474 0 80.842105 53.894737 90 1 0-107.789474 0Z" fill="#7F5B53" p-id="7489"></path><path d="M592.842105 485.052632a134.736842 107.789474 90 1 0 215.578948 0 134.736842 107.789474 90 1 0-215.578948 0Z" fill="#FFFFFF" p-id="7490"></path><path d="M646.736842 485.052632a80.842105 53.894737 90 1 0 107.789474 0 80.842105 53.894737 90 1 0-107.789474 0Z" fill="#7F5B53" p-id="7491"></path><path d="M520.982456 817.403509m-125.754386 0a125.754386 125.754386 0 1 0 251.508772 0 125.754386 125.754386 0 1 0-251.508772 0Z" fill="#802D40" p-id="7492"></path></svg>
<svg class="rating-1" style="width: 70px;height: 70px;margin: 15px 0;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7048"><path d="M512 0C260.042105 0 53.894737 206.147368 53.894737 458.105263V898.245614c0 39.522807 32.336842 71.859649 71.859649 71.859649h121.74821c74.734035 36.307088 165.941895 53.894737 264.497404 53.894737s189.763368-17.587649 264.497404-53.894737H898.245614c39.522807 0 71.859649-32.336842 71.859649-71.859649V458.105263C970.105263 206.147368 763.957895 0 512 0z" fill="#6E5847" p-id="7049"></path><path d="M69.506246 537.043088A458.374737 458.374737 0 0 0 53.894737 655.719298C53.894737 908.719158 259.00014 1024 512 1024S970.105263 908.719158 970.105263 655.719298C970.105263 410.354526 763.418947 209.488842 520.982456 197.614035h-17.964912c-242.436491 11.874807-449.122807 212.740491-449.122807 458.105263C53.894737 908.719158 259.00014 1024 512 1024S970.105263 908.719158 970.105263 655.719298" fill="#FDC794" p-id="7050"></path><path d="M341.333333 520.982456m-107.789473 0a107.789474 107.789474 0 1 0 215.578947 0 107.789474 107.789474 0 1 0-215.578947 0Z" fill="#FFFFFF" p-id="7051"></path><path d="M287.438596 485.052632m-35.929824 0a35.929825 35.929825 0 1 0 71.859649 0 35.929825 35.929825 0 1 0-71.859649 0Z" fill="#7F5B53" p-id="7052"></path><path d="M664.701754 520.982456m-107.789473 0a107.789474 107.789474 0 1 0 215.578947 0 107.789474 107.789474 0 1 0-215.578947 0Z" fill="#FFFFFF" p-id="7053"></path><path d="M610.807018 485.052632m-35.929825 0a35.929825 35.929825 0 1 0 71.859649 0 35.929825 35.929825 0 1 0-71.859649 0Z" fill="#7F5B53" p-id="7054"></path><path d="M359.280281 916.210526a17.946947 17.946947 0 0 1-14.461755-28.582175c59.481825-81.039719 170.163649-135.078175 251.97586-122.664421 41.984 6.287719 72.129123 29.821754 84.866246 66.272561a17.964912 17.964912 0 0 1-33.917755 11.856842c-8.353684-23.947228-27.288702-38.283228-56.24814-42.612772-68.518175-10.096281-166.283228 38.373053-217.716772 108.400281a17.964912 17.964912 0 0 1-14.497684 7.329684z" fill="#F9A671" p-id="7055"></path></svg>
<svg class="rating-2" style="width: 70px;height: 70px;margin: 15px 0;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5306"><path d="M512 0C260.042105 0 53.894737 206.147368 53.894737 458.105263V898.245614c0 39.522807 32.336842 71.859649 71.859649 71.859649h121.74821c74.734035 36.307088 165.941895 53.894737 264.497404 53.894737s189.763368-17.587649 264.497404-53.894737H898.245614c39.522807 0 71.859649-32.336842 71.859649-71.859649V458.105263C970.105263 206.147368 763.957895 0 512 0z" fill="#6E5847" p-id="5307"></path><path d="M69.506246 537.043088A458.374737 458.374737 0 0 0 53.894737 655.719298C53.894737 908.719158 259.00014 1024 512 1024S970.105263 908.719158 970.105263 655.719298C970.105263 410.354526 763.418947 209.488842 520.982456 197.614035h-17.964912c-242.436491 11.874807-449.122807 212.740491-449.122807 458.105263C53.894737 908.719158 259.00014 1024 512 1024S970.105263 908.719158 970.105263 655.719298" fill="#FDC794" p-id="5308"></path><path d="M358.4 551.091649m-107.789474 0a107.789474 107.789474 0 1 0 215.578948 0 107.789474 107.789474 0 1 0-215.578948 0Z" fill="#FFFFFF" p-id="5309"></path><path d="M609.908772 551.091649m-143.719298 0a143.719298 143.719298 0 1 0 287.438596 0 143.719298 143.719298 0 1 0-287.438596 0Z" fill="#FFFFFF" p-id="5310"></path><path d="M358.4 551.091649m-35.929825 0a35.929825 35.929825 0 1 0 71.85965 0 35.929825 35.929825 0 1 0-71.85965 0Z" fill="#6E5847" p-id="5311"></path><path d="M609.908772 551.091649m-53.894737 0a53.894737 53.894737 0 1 0 107.789474 0 53.894737 53.894737 0 1 0-107.789474 0Z" fill="#6E5847" p-id="5312"></path><path d="M284.402526 856.261614c-23.749614 0-47.104-8.15607-63.559859-24.61193a17.946947 17.946947 0 1 1 25.402386-25.402386c20.372211 20.372211 60.416 18.863158 82.387087-3.10793 34.833965-34.833965 98.357895-34.833965 133.19186 0 10.060351 10.042386 25.061053 15.809123 41.193544 15.809123s31.133193-5.766737 41.193544-15.809123c34.833965-34.833965 98.357895-34.833965 133.191859 0 21.198596 21.162667 61.188491 21.162667 82.387088 0a17.946947 17.946947 0 1 1 25.402386 25.402386c-16.743298 16.743298-40.99593 26.336561-66.59593 26.336562s-49.852632-9.593263-66.59593-26.336562c-21.198596-21.162667-61.188491-21.162667-82.387087 0-16.743298 16.743298-40.99593 26.336561-66.59593 26.336562s-49.852632-9.593263-66.59593-26.336562c-21.198596-21.162667-61.188491-21.162667-82.387088 0-18.414035 18.432-44.265544 27.71986-69.632 27.71986z" fill="#F9A671" p-id="5313"></path></svg>
<svg class="rating-3" style="width: 70px;height: 70px;margin: 15px 0;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5290"><path d="M790.45614 970.105263c-1.149754 1.131789 107.789474 0 107.789474 0 39.522807 0 71.859649-32.336842 71.859649-71.859649V458.105263C970.105263 206.147368 763.957895 0 512 0S53.894737 206.147368 53.894737 458.105263V898.245614c0 39.522807 32.336842 71.859649 71.859649 71.859649h121.74821c74.734035 36.307088 165.941895 53.894737 264.497404 53.894737 81.183439 0 157.210947-12.144281 223.30386-36.648421" fill="#6E5847" p-id="5291"></path><path d="M954.493754 537.043088c-12.629333 1.167719-25.384421 1.904281-38.283228 1.90428-199.392561 0-368.334596-142.964772-426.97207-340.758456C246.801965 210.063719 53.894737 410.354526 53.894737 655.719298 53.894737 908.719158 259.00014 1024 512 1024c81.363088 0 157.696-12.000561 223.932632-36.576561a71.123088 71.123088 0 0 1-43.978106-20.300351L592.842105 868.010667a211.087719 211.087719 0 0 0 62.517895-39.540772s44.014035-46.600982 54.685193-71.913544l96.238035 96.238035c27.773754 27.773754 29.62414 71.356632 2.137825 99.345965 99.902877-59.35607 161.684211-155.665965 161.68421-296.421053 0-41.049825-5.479298-80.82414-15.611509-118.67621z" fill="#FDC794" p-id="5292"></path><path d="M662.743579 821.786947A210.854175 210.854175 0 0 1 592.842105 868.010667l99.094456 99.094456a72.057263 72.057263 0 0 0 101.627509 0l12.701193-12.701193a72.057263 72.057263 0 0 0 0-101.627509l-96.238035-96.238035c-10.653193 25.330526-28.151018 46.11593-47.283649 65.248561z" fill="#FB7B76" p-id="5293"></path><path d="M742.759298 908.862877a17.911018 17.911018 0 0 1-12.701193-5.263719l-2.08393-2.065965c-32.534456-32.570386-53.571368-51.774877-62.625684-57.200281-4.958316 0.485053-9.665123-1.580912-13.34793-5.245754a17.946947 17.946947 0 0 1 0-25.402386c16.384-16.401965 38.84014 3.592982 56.894878 19.671579 15.773193 14.030596 33.055439 31.330807 44.499087 42.774456l2.065965 2.065965a17.946947 17.946947 0 0 1-12.701193 30.666105z m-65.410245-69.721824z m0.053894-0.053895l-0.035929 0.03593 0.035929-0.03593z" fill="#E64C3C" p-id="5294"></path><path d="M520.982456 898.245614c-118.873825 0-215.578947-96.705123-215.578947-215.578947a17.964912 17.964912 0 1 1 35.929824 0c0 99.058526 80.590596 179.649123 179.649123 179.649122s179.649123-80.590596 179.649123-179.649122a17.964912 17.964912 0 1 1 35.929825 0c0 118.873825-96.705123 215.578947-215.578948 215.578947zM413.192982 538.947368a17.911018 17.911018 0 0 1-12.701193-5.263719 89.932351 89.932351 0 0 0-127.029894 0 17.946947 17.946947 0 1 1-25.402386-25.402386 125.898105 125.898105 0 0 1 177.834666 0A17.946947 17.946947 0 0 1 413.192982 538.947368z" fill="#F9A671" p-id="5295"></path></svg>
<svg class="rating-4" style="width: 70px;height: 70px;margin: 15px 0;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5385"><path d="M512 0C260.042105 0 53.894737 206.147368 53.894737 458.105263V898.245614c0 39.522807 32.336842 71.859649 71.859649 71.859649h121.74821c74.734035 36.307088 165.941895 53.894737 264.497404 53.894737s189.763368-17.587649 264.497404-53.894737H898.245614c39.522807 0 71.859649-32.336842 71.859649-71.859649V458.105263C970.105263 206.147368 763.957895 0 512 0z" fill="#6E5847" p-id="5386"></path><path d="M916.210526 538.947368c-199.392561 0-368.334596-142.964772-426.97207-340.758456C246.801965 210.063719 53.894737 410.354526 53.894737 655.719298 53.894737 908.719158 259.00014 1024 512 1024S970.105263 908.719158 970.105263 655.719298c0-41.049825-5.479298-80.82414-15.611509-118.67621-12.629333 1.167719-25.384421 1.904281-38.283228 1.90428z" fill="#FDC794" p-id="5387"></path><path d="M251.508772 476.070175a134.736842 107.789474 90 1 0 215.578947 0 134.736842 107.789474 90 1 0-215.578947 0Z" fill="#FFFFFF" p-id="5388"></path><path d="M305.403509 476.070175a80.842105 53.894737 90 1 0 107.789473 0 80.842105 53.894737 90 1 0-107.789473 0Z" fill="#7F5B53" p-id="5389"></path><path d="M269.473684 718.596491v0.556913c0 68.64393 37.888 132.634947 99.579509 162.726175 38.426947 18.755368 84.291368 30.270877 133.694877 30.270877 49.349614 0 95.285895-11.497544 133.820632-30.216982C698.547649 851.824281 736.561404 787.509895 736.363789 718.596491H269.473684z" fill="#802D40" p-id="5390"></path><path d="M502.945684 798.68407C418.169263 798.68407 341.333333 818.086175 341.333333 862.315789l0.682667 2.730667c8.461474 6.287719 17.33614 12.126316 27.037193 16.851088 38.426947 18.755368 84.291368 30.270877 133.694877 30.270877 49.349614 0 95.285895-11.497544 133.820632-30.216982a172.373333 172.373333 0 0 0 27.665965-17.282246L664.701754 862.315789c0-44.229614-76.961684-63.631719-161.75607-63.631719z" fill="#E64C3C" p-id="5391"></path></svg>
<svg class="rating-5" style="width: 70px;height: 70px;margin: 15px 0;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5402"><path d="M512 0C260.042105 0 53.894737 206.147368 53.894737 458.105263V898.245614c0 39.522807 32.336842 71.859649 71.859649 71.859649h121.74821c74.734035 36.307088 165.941895 53.894737 264.497404 53.894737s189.763368-17.587649 264.497404-53.894737H898.245614c39.522807 0 71.859649-32.336842 71.859649-71.859649V458.105263C970.105263 206.147368 763.957895 0 512 0z" fill="#6E5847" p-id="5403"></path><path d="M69.506246 537.043088A458.374737 458.374737 0 0 0 53.894737 655.719298C53.894737 908.719158 259.00014 1024 512 1024S970.105263 908.719158 970.105263 655.719298C970.105263 410.354526 763.418947 209.488842 520.982456 197.614035h-17.964912c-242.436491 11.874807-449.122807 212.740491-449.122807 458.105263C53.894737 908.719158 259.00014 1024 512 1024S970.105263 908.719158 970.105263 655.719298" fill="#FDC794" p-id="5404"></path><path d="M287.438596 736.561404v0.556912c0 68.64393 37.888 132.634947 99.579509 162.726175 38.426947 18.755368 84.291368 30.270877 133.694877 30.270877 49.349614 0 95.285895-11.497544 133.820632-30.216982C716.512561 869.789193 754.526316 805.474807 754.328702 736.561404H287.438596z" fill="#802D40" p-id="5405"></path><path d="M412.995368 534.545965a17.964912 17.964912 0 0 1-13.473684-6.090105 89.878456 89.878456 0 0 0-126.778386-8.048281 17.964912 17.964912 0 0 1-23.731649-26.983298c39.271298-34.600421 94.297825-40.151579 138.617263-18.449965-14.30007-33.091368-46.978246-59.535719-82.602666-61.799298a17.982877 17.982877 0 0 1-16.797193-19.078737c0.628772-9.898667 9.18007-17.066667 19.078736-16.797193 69.093053 4.401404 128.017965 71.338667 123.634527 140.413754a18.000842 18.000842 0 0 1-17.946948 16.833123zM620.364351 534.545965a18.036772 18.036772 0 0 1-17.928983-16.833123c-4.401404-69.093053 54.523509-136.012351 123.616562-140.413754 9.629193-0.323368 18.432 6.898526 19.078737 16.797193a17.964912 17.964912 0 0 1-16.797193 19.078737c-35.606456 2.263579-68.302596 28.725895-82.602667 61.817263a125.98793 125.98793 0 0 1 138.617263 18.432 17.964912 17.964912 0 0 1-23.731649 26.983298 89.968281 89.968281 0 0 0-126.778386 8.048281 17.964912 17.964912 0 0 1-13.473684 6.090105z" fill="#F9A671" p-id="5406"></path><path d="M520.910596 816.648982C436.134175 816.648982 359.298246 836.051088 359.298246 880.280702l0.682666 2.730666c8.461474 6.287719 17.33614 12.126316 27.037193 16.851088 38.426947 18.755368 84.291368 30.270877 133.694877 30.270877 49.349614 0 95.285895-11.497544 133.820632-30.216982a172.373333 172.373333 0 0 0 27.665965-17.282246L682.666667 880.280702c0-44.229614-76.961684-63.631719-161.756071-63.63172z" fill="#E64C3C" p-id="5407"></path></svg>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
有趣的评分插件
最新推荐文章于 2024-06-06 10:05:55 发布