pure CSS gradient animation Happy rakshabandhan













HTML code:-

<!DOCTYPE html>
<html>
<head>

            <title>CSS text animation Happy Rakshabandhan 2019</title>

</head>
<body>

            <div class="container">
                        <label>
                                    <input type="checkbox" name="">
                                    <span class="check"></span>
                                    <p> Happy Rakshabandhan | 2019</p>
                        </label>
            </div>

</body>
</html>



CSS code:-

body
{
                background:#111;
                display: flex;
                margin:0;
                padding: 0;
                height: 100vh;
                justify-content: center;
                align-items: center;
}
.container
{
                text-align: center;
}
input[type="checkbox"]
{
                -webkit-appearance:none;
}
.check
{
                position: relative;
                height: 22px;
                width: 50px;
                background:#444;
                border:2px solid green;
                display: inline-block;
                border-radius: 20px;
}
.check:before
{
                content: '';
                position: absolute;
                left: 1px;
                width: 22px;
                height: 22px;
                background:#55fde2;
                border-radius: 50%;
                transition: 0.5s;
}
input[type="checkbox"]:checked ~ .check:before
{
                transform: translateX(26px);
                background:green;
}
.check:after
{
                content: 'N';
                position: absolute;
                color: #006d62;
                display: none;
                top: -4px;
                font-size: 30px;
                font-family: sans-serif;
                font-weight: bold;
                transform: translateX(48px);
                transition: 0.5s;
}
input[type="checkbox"]:checked ~ .check:after
{
                transform: translateX(52px);
                display: inline-block;
}
label
{
                justify-content: center;
                display: flex;
}
label p
{
                padding: 0;
                font-size: 55px;
                font-family: Colonna MT;
                width: 700px;
                font-weight: bold;
                background:linear-gradient(90deg,#33fde2,#b2ae00);
                position: absolute;
                display: none;
                animation: animate 2s;
}
input[type="checkbox"]:checked ~ p
{
                display: block;
}
@keyframes animate
{
                0%
                {
                                width: 10%;
                                transition-delay: 2s
                }
                100%
                {
                                width: 700px;
                }
}





Post a Comment

0 Comments