css实现星级评价评分效果-html代码-BFW代码库

css实现星级评价评分效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css'>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #222;
        }

        .rating {
            display: flex;
            flex-direction: row-reverse;
            font-family: "Ionicons";
        }
        .rating input {
            opacity: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
        .rating input:checked ~ label::before {
            opacity: 1;
        }
        .rating label {
            position: relative;
            margin-right: 6px;
            font-size: 5em;
            color: gold;
            cursor: pointer;
            transition: 0.5s;
        }
        .rating label:hover {
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
        }
        .rating label::before {
            position: absolute;
            content: "\f384";
            opacity: 0;
            transition: 0.5s;
        }
        .rating label:hover::before, .rating label:hover ~ label::before {
    .........完整代码请登录后点击上方下载按钮下载查看