纯CSS制作rate评分

2019-08-28 13:38:59 阅读：201 来源： 互联网

标签：评分 nth rate input div calc CSS left

前段时间在掘金看到一个标题是用纯CSS制作rate评分,然后自己就去想了一下,试了一下做了一个效果是做出来了,但代码好像有点…有待优化哈哈哈。后来回头点进去那位大哥是用SASS写的，发现确实秀。

那么先说一下我的代码的 实现思路
首先运用input的radio来做点击，然后使用伪元素 ‘~’ ，获取当前选中的后面的所有同辈元素，给后面同辈的元素添加样式。

在这里插入图片描述
具体是我是先用一个盒子把5个input和装着5个心的div包裹起来，然后div要在input的后面，因为配合后面使用的伪元素“~”；下面是html代码

<section id="box">
        <input type="radio" name="rate"><div>❤</div>
        <input type="radio" name="rate"><div>❤</div>
        <input type="radio" name="rate"><div>❤</div>
        <input type="radio" name="rate"><div>❤</div>
        <input type="radio" name="rate"><div>❤</div>
</section>

然后下面是布局，让 input 实现 绝对定位，然后让 div左浮动，放大input的选择框，让每个input定位到对应的每个div的上面，然后使用透明度将 input透明设为0，由于使用伪元素“~”所以选中的评分是反方向的，所以需要把它翻转过来，使用 transform: rotateY(180deg)翻转 过来；
在这里插入图片描述

下面是css代码

* {
    margin: 0;
    padding: 0;
}
#box {
    top:100px;
    right: 50%;
    transform: rotateY(180deg);
    position: relative;
}
div {
    font-size: 32px;
    line-height: 32px;
    float: left;
    color: wheat;
}
input {
    position: absolute;
    top: 0;
    left: 10px;
    transform: scale(2) translateY(40%);
    opacity: 0;
    cursor: pointer;
}
input:nth-of-type(2){
    left: calc(7px + 32px);
}
input:nth-of-type(3){
    left: calc(7px + 64px);
}
input:nth-of-type(4){
    left: calc(7px + 96px);
}
input:nth-of-type(5){
    left: calc(7px + 128px);
}
input[name='rate']:checked  + div{
    color: red; 
}
input[name='rate']:hover ~ div,
input[name='rate']:checked ~ div{
    color: red; 
}

看了那位大哥的代码后整个人都自闭了，觉得自己的好row啊 [捂脸]；
那么附上那位大哥用SASS写的（https://juejin.im/entry/5d5a420cf265da03913514fd），确实是秀！
觉得压力好大啊，现在的人都这么的优秀的嘛，自闭了。加油吧~~

标签：评分,nth,rate,input,div,calc,CSS,left
来源： https://blog.csdn.net/xiaomohhh/article/details/100116745

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

纯CSS制作rate评分