सीएसएस 5 स्टार रेटिंग

अनुशंसित

29 July 2024

नेटफ्लिक्स इंट्रो एनिमेशन शुद्ध सीएसएस

23 November 2024

<html>
            <head>
              <meta charset="utf-8" />
              <title>Webleb</title>
              <link href="/css/styles.css" rel="stylesheet" type="text/css" />
            </head>
            <body>
                <form>
                    <div class="rating">
                        <input type='radio' hidden name='rate' id='rating_5' data-idx='0'>	
                        <label for='rating_5'></label>
                    
                        <input type='radio' hidden name='rate' id='rating_4' data-idx='1'>
                        <label for='rating_4'></label>
                    
                        <input type='radio' hidden name='rate' id='rating_3' data-idx='2'>
                        <label for='rating_3'></label>
                    
                        <input type='radio' hidden name='rate' id='rating_2' data-idx='3'>
                        <label for='rating_2'></label>
                    
                        <input type='radio' hidden name='rate' id='rating_1' data-idx='4'>
                        <label for='rating_1'></label>
                    </div>
                </form>
            </body>
            </html>

styles.css

body {
            background: #e2e1d9;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-y: hidden;
        }
        .rating {
            display: inline-block;
            font-size: 0;
            position: relative;
            text-transform: capitalize;
            padding: 0 50px 8%;
            color: gray;
        }
        .rating label {
            display: inline-block;
            float: right;
            padding: 0;
            font-size: 50px;
            cursor: pointer;
        }
        .rating label::before {
            content: "\2606";
            display: inline-block;
            transition: 0.2s;
        }
        .rating label span {
            opacity: 0;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
            height: 20px;
            font-size: 1rem;
            white-space: nowrap;
            transition: 0.15s ease-out;
            pointer-events: none;
            letter-spacing: -2px;
            transform: translateY(-50%);
        }
        .rating label:hover span {
            opacity: 1;
            transform: none;
            letter-spacing: 0;
        }
        .rating label:hover::before {
            color: orange;
            opacity: 0.6;
            filter: drop-shadow(0 0 4px);
        }
        .rating label:hover ~ *::before {
            color: orange;
            opacity: 0.6;
            filter: drop-shadow(0 0 4px);
        }
        .rating input:checked ~ label::before {
            content: "\2605";
            color: orange;
            filter: drop-shadow(0 0 4px);
            transform: rotate(0.2turn);
            transition-delay: calc(0.1 * attr(data-idx integer));
        }

सीएसएस 5 स्टार रेटिंग

अनुशंसित

नेटफ्लिक्स इंट्रो एनिमेशन शुद्ध सीएसएस

स्टार ट्रेल्स एनिमेशन

सीएसएस सोशल आइकन्स टॉग्लर

index.html

styles.css

main.js

अनुशंसित

नेटफ्लिक्स इंट्रो एनिमेशन शुद्ध सीएसएस

स्टार ट्रेल्स एनिमेशन

सीएसएस सोशल आइकन्स टॉग्लर

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js