1

Estava fazendo um layout no figma, e to passando ele pra html e css, mas eu queria fazer uma animação. Como dar pra ver eu tenho um triangulo rosa, e eu queria que ao passar o mouse sobre ele, ele ampliasse e "pegasse" a parte azul (escritas quando tiver também), e toda a tela ficasse rosa sobrepondo a cor azul.

body{
            background-color:#3ED3F3;
        }
        .triangulo {
            width: 0;
            height: 0;
            border-top: 300px solid transparent;
            border-bottom: 300px solid transparent;
            border-left: 600px solid #F33E8A;
            position: absolute;
            left: 0px;
            top:0px;
        }
        .triangulo:hover{

         }
<body>
    <div class="container">
        <div class="triangulo"> </div>
    </div>
   
</body>

1

1 Resposta 1

0

Você pode usar a propriedade transform com o valor scale para aumentar o tamanho do triângulo. Também sugiro incluir a propriedade transition para deixar o efeito mais suave. Não sei se era bem isso, porque talvez se você incluir os textos que mencionou essa não seja a melhor opção, mas baseado no que passou essa parece ser a solução mais simples.

Não esqueça de verificar a compatibilidade das propriedades com o navegador.

body{
            background-color:#3ED3F3;
        }
        .triangulo {
            width: 0;
            height: 0;
            border-top: 300px solid transparent;
            border-bottom: 300px solid transparent;
            border-left: 600px solid #F33E8A;
            position: absolute;
            left: 0px;
            top:0px;
            transition: transform .5s ease-in-out; /* deixa o efeito suave */
        }
        .triangulo:hover{
            /* aumenta o tamanho do triângulo 10 vezes 
            este é um valor um pouco exagerado, altere à seu gosto */
            transform: scale(10);
         }
<body>
    <div class="container">
        <div class="triangulo"> </div>
    </div>
   
</body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .