Skip to content

CSS Star Animation


<!DOCTYPE html>
    <title>Check Box</title>
    <link rel="stylesheet" type="text/css" href="">
    <link href="" rel="stylesheet">

        <div class="rating">
            <input type="radio" name="star" id="star1">
            <label for="star1"></label>
            <input type="radio" name="star" id="star2">
            <label for="star2"></label>
            <input type="radio" name="star" id="star3">
            <label for="star3"></label>
            <input type="radio" name="star" id="star4">
            <label for="star4"></label>
            <input type="radio" name="star" id="star5">
            <label for="star5"></label>



    margin: 0;
    padding: 0;
    background: #262626;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%) rotateY(180deg);
    display: flex;
.rating input{
    display: none;
.rating label{
    display: block;
    cursor: pointer;
    width: 250px;
.rating label:before{
    content: "\f005";
    font-family: fontAwesome;
    position: relative;
    display: block;
    font-size: 250px;
    color: #101010;
.rating label:after{
    content: "\f005";
    font-family: fontAwesome;
    position: absolute;
    display: block;
    font-size: 250px;
    color: #1f9cff;
    top: 0;
    opacity: 0;
    transition: .5s;
    text-shadow: 0 2px 5px black
.rating label:hover:after,
.rating label:hover ~ label:after,
.rating input:checked ~ label:after{
    opacity: 1;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: