前端小技巧（二）：评分效果css版

最新推荐文章于 2021-06-29 23:41:40 发布

/*----无忧----*/

最新推荐文章于 2021-06-29 23:41:40 发布

阅读量740

点赞数

分类专栏：前端小技巧文章标签：前端 css

本文链接：https://blog.csdn.net/q213546879/article/details/78874168

版权

前端小技巧专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:205px;
            height:42px;
            position: relative;
        }
        label{
            width:42px;
            float: right;
            height: 42px;
            margin-left: -1px;
        }
        label span{
            width:40px;
            height: 40px;
            border:1px solid #0b4b5a;
            display: inline-block;
            position: relative;
            z-index: 2;
        }
        label:hover dfn{
            display: block;
            z-index:1;
        }
        label input{
            display: none;
        }
        label input:checked~dfn{
            display: block;
        }

        label dfn{
            width:100px;
            height: 42px;
            line-height:42px;
            text-align: center;
            position: absolute;
            background: #f00283;
            display: none;
            top:0;
            right: -110px;
            font-style: normal;
        }
        label em{
            height:40px;
            position: absolute;
            left:0;
            top:1px;
        }
        label:hover em{
            z-index: 1;
        }
        .item5:hover em,.item5 input:checked~em{
            width: 40px;
            background: #f00;
        }
        .item4:hover em,.item4 input:checked~em{
            width: 81px;
            background:#ffa800;
        }
        .item3:hover em,.item3 input:checked~em{
            width: 122px;
            background: #e1e400;
        }
        .item2:hover em,.item2 input:checked~em{
            width: 163px;
            background: #ace400;
        }
        .item1:hover em,.item1 input:checked~em{
            width: 204px;
            background: #00e400;
        }
    </style>
</head>
<body>

<div class="box">
    <label class="item1">
        <input type="radio" name="grid">
        <span></span>
        <dfn>非常好</dfn>
        <em></em>
    </label>
    <label class="item2">
        <input type="radio" name="grid">
        <span></span>
        <dfn>很好</dfn>
        <em></em>
    </label>
    <label class="item3">
        <input type="radio" name="grid">
        <span></span>
        <dfn>一般</dfn>
        <em></em>
    </label>
    <label class="item4">
        <input type="radio" name="grid">
        <span></span>
        <dfn>较差</dfn>
        <em></em>
    </label>
    <label class="item5">
        <input type="radio" name="grid">
        <span></span>
        <dfn>很差</dfn>
        <em></em>
    </label>
</div>

</body>
</html>

这里写图片描述

这是JS入门的一个小效果，相信大家也都见过，不必多说。
其实用到的技巧也不多，主要就是“+”、“~”这两个比较骚的选择器再配合单选按钮的checked伪类

/*----无忧----*/

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小技巧（二）：评分效果css版

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width:205px; height:42px; position: relative;
复制链接

扫一扫

专栏目录