你认为你现在的生活是什么的呢？幸福或是无话可说呢？进来做个选择吧~

 <div class="rating">
     <input type="radio" name="star" id="star1" checked>
     <label for="star1">
         <span>😁</span>
         <h4>永远热爱</h4>
     </label>
     <input type="radio" name="star" id="star2">
     <label for="star2">
         <span>😃</span>
         <h4>元气满满</h4>
     </label>
     <input type="radio" name="star" id="star3">
     <label for="star3">
         <span>🙂</span>
         <h4>微笑面对</h4>
     </label>
     <input type="radio" name="star" id="star4">
     <label for="star4">
         <span>😐</span>
         <h4>无话可说</h4>
     </label>
     <input type="radio" name="star" id="star5">
     <label for="star5">
         <span>🤡</span>
         <h4>我是小丑</h4>
     </label>
     <div class="text">你认为现在的生活怎么样呢？</div>
 </div>

 * {
   margin: 0;
   padding: 0;
   font-family: "微软雅黑", sans-serif;
   box-sizing: border-box;
 }
 body {
   /* flex 布局 垂直居中*/
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   /* 线性渐变色 */
   background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
   color: #000;
 }
 span{
   font-size:120px;
 }
 .rating {
   position: relative;
   display: flex;
   /* 从左向右 */
   flex-direction: row-reverse;
 }
 /* 让input 元素隐藏 */
 .rating input {
   display: none;
 }
 ​
 .rating label {
   position: relative;
   width: 0;
   height: 120px;
   cursor: pointer;
   transition: 0.5s;
   /* 设置灰度, 设置为1,简单理解为就是给上了黑白滤镜 */
   filter: grayscale(1);
   /* 不透明度,设置为0就是不显示 */
   opacity: 0;
 }
 ​
 .rating:hover label {
   width: 160px;
   opacity: 0.2;
 }
 ​
 /* 这里采用的就是相邻兄弟选择器进行选择
 hover 或 checked 时,
 灰度设置为0
 设置为不透明状态,
 再给个宽度
 */
 .rating input:hover + label,
 .rating input:checked + label {
   filter: grayscale(0);
   opacity: 1;
   width: 160px;
 }
 .rating label h4 {
   color: #000;
   font-size: 24px;
   padding-top: 10px;
   margin-left: 40px;
   font-weight: 500;
   /* 让文字不换行 */
   white-space: nowrap;
   opacity: 0;
   /* 给底下出来的小字整一个不算是动画的动画吧 */
   transform: translateX(-50px) scale(0);
   transition: 0.5s;
 }
 /* 选中时的效果 */
 .rating input:hover + label h4,
 .rating input:checked + label h4 {
   opacity: 1;
   transform: translateY(0px) scale(1);
 }
 .text {
   position: absolute;
   top: -80px;
   /* 居中效果 */
   left: 50%;
   transform: translateX(-50%);
   color: #000;
   /* 我爱你噢，永远热爱生活，永远热泪盈眶*/
   width: 520px;
   font-weight: 700;
   /* 设置字间距 */
   letter-spacing: 2px;
   text-align: center;
   white-space: nowrap;
   font-size: 36px;
 }
 ​