Skip to content
Advertisements

CSS Star Animation


HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>Check Box</title>
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
    <body>

        <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>
        </div>

    </body>
</html>

CSS CODE:

body{
    margin: 0;
    padding: 0;
    background: #262626;
}
.rating{
    position: absolute;
    top:50%;
    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;
}
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: