「兔了个兔」创意投稿大赛——卯兔评分栏

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

开篇

昨天晚上在手机上订了个票，结束的时候系统弹出了个小窗口让我评分，我就评了一下，随即就被他的评分的动效给吸引住了，于是乎，今天就简单的复现了一下，并没完全一致，其中加入了我的一点小创意（搞怪）。

放一下效果图

源码已发布到码上掘金，可自行调试参考

思路

首先，效果实现依赖于input和:checked。依然是flex布局,依然是完全居中，先把几个input单选框搞出来，然后用label的for绑上对应的input，label里面包括了一个img和一个h4。之后是css,先将单个的位置调好，然后就是把每个label的宽度置0，之所以这样，是为了配合:hover :checked的时候把width显示出来，通过transition形成动画渐变消失效果。最后设置一个默认选中就完成了。

实现

HTML

<div class="inner">
    <input type="radio" name="rabbit" id="rabbit1" checked>
    <label for="rabbit1">
      <img src="./1.png" alt="">
      <h4>优秀</h4>
    </label>
    ……
  </div>

布局元素很简单，但是要记得，把input id="xxx" 和 label for="xxx"一一对应。

css

这里就捡着重要的样式来说，

input{
  display: none;
}
label{
  position: relative;
  width: 0;
  height: 120px;
  cursor: pointer;
  transition: 0.5s;
  filter: grayscale(1);
  opacity: 0;
}

把input的隐藏的目的可以消除哪个丑陋的小圆圈，把label的宽置0为了更好的实现后面的动画，filter: grayscale()这个是把元素置灰，国家公祭日等特殊场合，各大网页都成了灰色就是这个属性的功劳。

input:hover + label,
input:checked + label{
  filter: grayscale(0);
  opacity: 1;
  width: 160px;
}

这个就是动效的主体了，经过和确认后都把宽度支起来并且取消置灰和透明度就实现了对应评分的从无到有的过程。+也是个选择器，可以选出他的后一个兄弟元素，，也提一下~选择器吧，~可以选择出他后面所有的兄弟元素。

到此，卯兔评分栏就基本成型了。我也同步在码上掘金上发布了这个代码，喜欢的话可以去看看。兔了个兔（四） - 码上掘金 (juejin.cn)

最后，一个小请求，麻烦各位看官动动手指点个赞吧！！！