在H5页面中用CSS transition实现星级评分的缩放+旋转效果，关键是对每个星星单独设置transform过渡，使用cubic-bezier缓动、scale(1.2)和rotate(5deg)，配合:hover或.active类控制点亮状态，并通过translateZ(0)触发硬件加速确保流畅。
在 H5 页面中，用 transition 实现星级评分点亮时的「缩放 + 旋转」过渡效果，关键在于：给每个星星图标设置独立的过渡属性，并在状态变化（如 hover 或 class 切换）时触发 transform 变化。不需要 JS 动画库，纯 CSS 即可完成。
1. 结构基础：用 inline-block 或 flex 排列星星
推荐使用语义化结构，比如 <ul class="star-rating"> 包裹 5 个 <li>，每个里面放一个 <i> 或伪元素表示星星。确保每个星星可独立控制样式：
- 避免用单张雪碧图或 SVG 组合，否则难以单独缩放单颗星
- 推荐用字体图标（如 Font Awesome 的
fa-star/fa-star-half-alt/fa-star-o）或 SVG 单独内联，方便加 class 控制状态 - 给每颗星设
display: inline-block或用flex布局，保证间距可控
2. 过渡核心：给 transform 加 transition
只对 transform 属性设置过渡，不建议同时过渡 color 和 transform（易卡顿）。示例写法：
.star-rating i {
font-size: 24px;
color: #e0e0e0;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
}
.star-rating i.active {
color: #ffc107;
transform: scale(1.2) rotate(5deg);
}
-
cubic-bezier(0.175, 0.885, 0.32, 1.275)是轻微弹跳缓动，让点亮更灵动（比默认ease更有反馈感） -
scale(1.2)放大 20%，rotate(5deg)微倾，避免过度旋转失真 - 若需「点亮从左到右逐颗动画」，可用
transition-delay配合 :nth-child(n)
3. 点亮逻辑：hover 或点击激活 active 类
纯 CSS 可实现 hover 评分（鼠标划过即高亮左侧所有星），JS 则用于点击后持久记录评分。CSS 示例：
.star-rating:hover i {
color: #e0e0e0;
}
.star-rating:hover i:hover,
.star-rating:hover i:hover ~ i {
color: #ffc107;
transform: scale(1.2) rotate(5deg);
}
- 利用
~通用兄弟选择器实现「划到第 3 颗，前 3 颗都亮」 - 注意：hover 效果无法记忆状态，需 JS 添加
.active类来固化已选星级 - 移动端要考虑
:active伪类或监听touchstart来模拟点亮
4. 兼容与优化细节
确保在主流安卓/iOS WebView 中流畅运行：
- 给星星加
transform: translateZ(0)或will-change: transform触发硬件加速（尤其 iOS Safari） - 避免在
transition中写多个属性（如transition: all 0.3s），只过渡transform和color（分开写更安全） - 如果用 SVG 星星，确保
<svg>有固定宽高，且viewBox设置正确，否则scale()可能偏移
