Como fazer o efeito “float” e “sink”, flutuar e afundar com CSS 3 utilizando as propriedades transform e transition-duration.
Com as propriedades transform e transition-duration conseguimos simular o efeito de flutuar e afundar ou subir e descer em um elemento qualquer em sua página, Div, Input, etc, veja os exemplos abaixo:
Exemplo com Float “flutuar”
Agora o exemplo com Sink “afundar”
.float { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .float:hover, .float:focus, .float:active { -webkit-transform: translateY(-8px); transform: translateY(-8px); } .sink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .sink:hover, .sink:focus, .sink:active { -webkit-transform: translateY(8px); transform: translateY(8px); }
Ajuste as propriedade transform: translateY(-8px); para aumentar a quantidade de pixel que o elemento deverá subir ou descer.
Já para alterar a velocidade de execução da animação mude transition-duration informando o novo valor desejado em segundos.
CSS já com o tamanho reduzido para você incluir no seu projeto.
.float,.sink{display:inline-block;vertical-align:middle;box-shadow:0 0 1px transparent}.float{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.float:active,.float:focus,.float:hover{-webkit-transform:translateY(-8px);transform:translateY(-8px)}.sink{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.sink:active,.sink:focus,.sink:hover{-webkit-transform:translateY(8px);transform:translateY(8px)}
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…