我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
你认为你现在的生活怎么样呢？
我先说：我觉得我在生活中就如本篇文章的封面我所选的一样，我就是个活生生的小丑🤡
哈哈，到你啦，你是什么样的呢？
结合 emoji 小表情给自己的生活评了个分，你是什么样的呢？
赶上创新大赛的最后一趟车~
一、效果图
二、HTML
布局什么的都是非常简单的，就是基础的flex布局，没啥不认识的~
大伙的生活会是什么样的勒？
<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>
三、CSS
里面的css，其实都是大家见过的，只是可能没怎么用，我也是个前端小白中的小白，所以没抽出来细细讲，不过里面都是添加了注释的， 放心食用~
* {
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;
}
比较有趣的可能就是 filter属性吧，可以整出滤镜的效果，在掘金有看到大佬写过，我也就只能做做黑白~
四、码上掘金
后记
这次创意大赛总共写了三篇，其实一开始准备直接肝最大的奖品的，怎么说勒，虽然不怎么会前端，但是掘金每天都给推，让我刹那间都觉得自己行啦，哈哈
不过能力和创意都不足以让我如此疯狂~ 哈哈
不过还是有不少收获的，虽然不能算的上真正的能力，但是也算是扩展了一下自己的知识
等到下一次也希望自己能够在自己擅长的领域，竭尽全力的去拼搏一下
真正的文章还是需要时间多磨炼，真正的知识还是需要深耕，真正属于自己的就需要努力啦
写于 2022 年 8 月 12 日晚，作者：宁在春
