OneCompiler

kieldeveloperxsy

115
<!DOCTYPE html> <html> <head> <title>This is why you came here</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .heartb { position: relative; width: 60px; z-index: 99999; height: 50px; left: 25%; animation: heart 1s infinite; transform: scale(.8); transition: .6s; } 
    .heartb:before,
    .heartb:after {
        content: "";
        width: 25px;
        height: 40px;
        position: absolute;
        left: 25px;
        top: 0;
        border-radius: 50px 50px 6px 6px;
        background: crimson;
        transform: rotate(-45deg);
        transform-origin: 0 100%;
    }

    .heartb:after {
        left: 0;
        transform: rotate(45deg);
        transform-origin: 100% 100%;
    }

    @keyframes heart {
        0% {
            transform: scale(.8) translate(0, 0);
        }
        50% {
            transform: scale(.92) translate(0, 12px);
        }
        100% {
            transform: scale(.8);
        }
    }

    .button-heart {
        background: transparent;
        margin: auto;
        height: 150px;
        position: relative;
        width: 150px;
        border: none;
        overflow: hidden;
        animation: floaty 1s infinite;
    }

    @keyframes floaty {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(0, 12px);
        }
    }

    .bg_heart {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .heart {
        position: absolute;
        top: -50%;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -m-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

    .heart:before {
        position: absolute;
        top: -50%;
        left: 0;
        display: block;
        content: "";
        width: 100%;
        height: 100%;
        background: inherit;
        border-radius: 100%;
    }

    .heart:after {
        position: absolute;
        top: 0;
        right: -50%;
        display: block;
        content: "";
        width: 100%;
        height: 100%;
        background: inherit;
        border-radius: 100%;
    }

    @-webkit-keyframes love {
        0% {
            top: 110%;
        }
    }

    @-moz-keyframes love {
        0% {
            top: 110%;
        }
    }

    @-ms-keyframes love {
        0% {
            top: 110%;
        }
    }

    @keyframes love {
        0% {
            top: 110%;
        }
    }
</style>
</head> <body> <div class="bg_heart container-fluid"> <div class="container-fluid text-center head-plugin" style="background-color:#d86a77;"> <div class="alert alert-danger"> <strong>Danger!</strong> hi jammria imy and iloveyou at the same time sorry sa nagawa ko dati babawiin ko talaga yo'n hehe, btw, gusto mo 'tong song diba, play mo mwaa^^. </div> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rScwLoES2bM" allow="encrypted-media" allowfullscreen></iframe> </div> <div id="p-4"> <div id="myBar" class="progress-bar progress-bar-striped progress-bar-animated m-3 text-center bg-success">This is my love for you</div> <button onclick="move()" class="btn btn-success">click mo 'to pogi if gaano mo'ko ka mahal char</button> </div> </div> </div> <script> var i = 0; function move() { if (i == 0) { i = 1; var elem = document.getElementById("myBar"); var width = 10; var id = setInterval(frame, 40); function frame() { if (width >= 120) { clearInterval(id); i = 0; } else { width++; if (width > 100) { elem.innerHTML = "It's Infinite"; } else { elem.style.width = width + "%"; elem.innerHTML = width + "%"; } } } } } </script> </body> </html> ```