How do the width and height of an element start from the center and expand to the left and right?

Asked

Viewed 53 times

3

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ripple effect</title>
    <style>

        body {
            margin: 0;
        }

        #button {
            width: 170px;
            height: 70px;
            background: #4cacaf;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            outline: none;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            
        }
        
        #ripple {
            width: 0;
            width: 0;
            border-radius: 50%;
            background: rgb(46, 253, 219);
            position: absolute;
            opacity: 0.4;
        }

        @keyframes animatedRipple {
            0% {
                width: 0;
                height: 0;
            }

            100% {
                width: 100px;
                height: 100px;
            }
        }
        
        </style>
</head>
<body>

    <button id="button">CLICK ME
        <div id="ripple"></div>
    </button>

    <script>
        
        let button = document.querySelector("#button");
        let ripple = document.querySelector("#ripple");

        button.onmousemove = () => {
            let x = event.pageX;
            let y = event.pageY;

            button.onclick = () => {
                ripple.style.left = `${x - 50}px`;
                ripple.style.top = `${y - 40}px`;
                ripple.style.animation = "animatedRipple 0.4s linear";
            };

            button.addEventListener("animationend", () => {
                ripple.style.animation = "none";
            });
        };

    </script>

</body>
</html>

I created a button with effect Ripple Effect, but the problem is that when I click the ripple does not part of the center and expands, it leaves the left and expands to the right, that neither this small example of low.

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    
        div {
            background: red;
            border-radius: 50%;
            animation: animatedDiv 1s linear infinite;
        }

        @keyframes animatedDiv {
            0% {
                width: 0;
                height: 0;
            }

            100% {
                width: 100px;
                height: 100px;
            }
        }
    
    </style>
</head>
<body>

    <div></div>
    
</body>
</html>

the animation of div part of the left and goes to the right, how to make the width and height of it from the center and expand to the left and right, as if it were an explosion?

html css

1 answer

3


I think you can achieve this effect by leaving the negative margin, try this.

Here has a link to codepen.io where you can play a little bit.

<!doctype html>
    <html lang="pt-br">
    <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
       <style>
            :root {
              /* Não retire o px do 0 */
             --margem-inicial: 0px;
             --tamanho-expansao: 100px;
             --margem-expansao-calc: calc((var(--margem-inicial) - var(--tamanho-expansao)) / 2);
            }

            div {
                position: relative;
                top: 50vh;
                width: 10px;
                height: 10px;
                background-color: red;
                left: 50vw;
                animation: animation 1s linear infinite;
            }

            @keyframes animation {
                0% {
                width: 10px; 
                height: 10px;
              }

                100% {
                width: 110px; 
                height: 110px;
                margin: var(--margem-expansao-calc);
              }
            }
        </style>
    </head>
    <body>

        <div></div>

    </body>
    </html>

  • 1

    That’s right, thanks, I help a lot!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.