CSS 3.0实现特效评分栏

越陌度阡

发布于 2020-11-26 10:14:52

8650

发布于 2020-11-26 10:14:52

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

给大家分享一个用CSS 3.0实现的特效评分栏，效果如下：

以下是代码实现，欢迎大家复制粘贴和收藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 3.0实现特效评分栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: '微软雅黑', sans-serif;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #20152d;
        }

        .rating {
            position: relative;
            display: flex;
            flex-direction: row-reverse;
        }

        .rating input {
            display: none;
        }

        .rating label {
            position: relative;
            width: 0;
            height: 120px;
            cursor: pointer;
            transition: 0.5s;
            filter: grayscale(1);
            opacity: 0;
        }

        .rating:hover label {
            width: 160px;
            opacity: 0.2;
        }

        .rating input:hover+label,
        .rating input:checked+label {
            filter: grayscale(0);
            opacity: 1;
            width: 160px;
        }

        .rating label h4 {
            color: #fff;
            font-style: 24px;
            padding-top: 10px;
            margin-left: 40px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            transform: translateY(-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: -150px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            width: 500px;
            font-weight: 700;
            letter-spacing: 2px;
            text-align: center;
            white-space: nowrap;
            font-size: 36px;
        }
    </style>
</head>

<body>
    <div class="rating">
        <input type="radio" name="star" id="star1" checked>
        <label for="star1">
            <img src="5.png" alt="">
            <h4>优秀</h4>
        </label>
        <input type="radio" name="star" id="star2">
        <label for="star2">
            <img src="4.png" alt="">
            <h4>满意</h4>
        </label>
        <input type="radio" name="star" id="star3">
        <label for="star3">
            <img src="3.png" alt="">
            <h4>一般</h4>
        </label>
        <input type="radio" name="star" id="star4">
        <label for="star4">
            <img src="2.png" alt="">
            <h4>差评</h4>
        </label>
        <input type="radio" name="star" id="star5">
        <label for="star5">
            <img src="1.png" alt="">
            <h4>讨厌</h4>
        </label>
        <div class="text">你喜欢这个系列的课程吗？</div>
    </div>
</body>

</html>

以下是上面代码中引入的图片。

1.png