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

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

我正在参加「创意开发 投稿大赛」详情请看:掘金创意开发大赛来了!

你认为你现在的生活怎么样呢?

我先说:我觉得我在生活中就如本篇文章的封面我所选的一样,我就是个活生生的小丑🤡

哈哈,到你啦,你是什么样的呢?

结合 emoji 小表情给自己的生活评了个分,你是什么样的呢?

赶上创新大赛的最后一趟车~

一、效果图

生活_.gif

二、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 日晚,作者:宁在春

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改