如下，非常简单的一个小玩意。
废话不多说直接上代码：
<!--
* @轮子的作者: 轮子哥
* @Date: 2024-05-22 10:43:45
* @LastEditTime: 2024-05-24 10:28:53
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.emoji {
background: #eee;
margin: 20px;
padding: 10px;
border-radius: 20px;
text-align: center;
}
.emoji>p {
margin: 10px;
}
.emoji-list {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
}
.emoji-item {
filter: grayscale(100);
cursor: pointer;
font-size: 30px;
height: 60px;
width: 60px;
line-height: 60px;
transform: rotate(0deg);
transition: filter 1.5s ease, font-size 0.5s ease, transform 1.5s ease;
}
.emoji-selected {
filter: grayscale(0);
font-size: 35px;
}
@media (any-hover: hover) {
.emoji-item:hover {
filter: grayscale(0);
font-size: 35px;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<section>
<div class="emoji">
<p>Would you find this answer helpful?</p>
<div class="emoji-list">
<div class="emoji-item" onclick="selectEmoji(this)">😞</div>
<div class="emoji-item" onclick="selectEmoji(this)">😑</div>
<div class="emoji-item" onclick="selectEmoji(this)">😄</div>
</div>
</div>
</section>
</body>
<script>
function selectEmoji(emojiItem) {
const emojiItems = document.querySelectorAll('.emoji-item');
switch (emojiItem.textContent) {
case '😞':
const direction1 = emojiItem.style.transform == '' || emojiItem.style.transform.includes('0.1') ? '-200' : '0.1';
const direction2 = emojiItem.style.transform == '' || emojiItem.style.transform.includes('0.1') ? '200' : '0.1';
emojiItems.forEach((item) => {
if (item.textContent == '😄') {
item.style.transform = `translateX(${direction1}%)`
item.classList.add('emoji-selected');
} else {
item.classList.remove('emoji-selected')
}
});
emojiItem.style.transform = `translateX(${direction2}%)`
console.log("轮")
break;
default:
emojiItems.forEach(item => item.classList.remove('emoji-selected'));
emojiItem.classList.add('emoji-selected');
console.log("子")
break;
}
}
</script>
</html>使用grayscale实现聚焦变颜色 ，用@media (any-hover: hover) {}来解决移动端hover触发的问题，再加点过渡效果，css样式就写好了，还是非常简单的。
js就简单的改变方向平移和增删选中类，非常简单就不多说了。
