Tutorial ensinando a como criar o efeito de pulsar utilizando CSS 3.
Exemplo do efeito:
Elemento no estado normal:
Elemento com efeito ativo:
Código CSS utilizado para criar o efeito desejado:
@-webkit-keyframes ef-pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes ef-pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } .ef-pulse-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .ef-pulse-grow:hover, .ef-pulse-grow:focus, .ef-pulse-grow:active { -webkit-animation-name: ef-pulse-grow; animation-name: ef-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; }
Adicione o CSS na folha de estilo do seu projeto / site.
CSS na versão comprimida (tamanho reduzido).
@-webkit-keyframes ef-pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes ef-pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}.ef-pulse-grow{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent}.ef-pulse-grow:hover,.ef-pulse-grow:focus,.ef-pulse-grow:active{-webkit-animation-name:ef-pulse-grow;animation-name:ef-pulse-grow;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}
Observação: Esse efeito utiliza propriedades modernas do CSS, em navegadores antigos, obsoletos a animação não irá funcionar.
Segurança: Atualizações frequentes geralmente incluem patches de segurança para corrigir vulnerabilidades identificadas. Ao manter o Magento atualizado, você reduz significativamente…
Como adicionar uma mensagem de Alerta ou Aviso do Admin do Magento 2 Injete o Magento\Framework\Message\ManagerInterface no construtor da sua…
Para exibir as mensagens adicionadas na classe Magento\Framework\Message\ManagerInterface em um arquivo .phtml, você pode usar o seguinte código: <?php $objectManager…
Para criar um script no Magento 2 que exporte as categorias para um arquivo XML com o nome da categoria,…
Para definir um vídeo MP4 como plano de fundo em um <div> usando HTML e CSS, você pode seguir estas…
Como desativar o "lastname" no Magento 2 e Adobe Commerce Desativando a obrigatoriedade do campo Execute a SQL abaixo diretamente…
Ver comentários
Primeiramente muito obrigado pela informação!
Estou tentando utilizar, mas só funciona quando passo o mouse. Como faço para deixar ele pulsando continuamente, como na terceira caixa do exemplo?
Olá Iago, você terá que ação "hover" na sua diretriz de CSS