Início Dicas e tutoriais de CSS3 Efeitos no Background Efeitos no background – Sweep to Right, Left, Bottom e Top – CSS3
Efeitos no Background

Efeitos no background – Sweep to Right, Left, Bottom e Top – CSS3

Efeitos no background – Sweep to Right, Left, Bottom e Top – CSS3

Criando efeitos no background de um elemento durante o evento “on hover” utilizando CSS 3.

Os exemplos utilizando o pseudo elemento :before junto com as propriedades transform e transition-duration para criar efeitos interessante no background de um elemento, veja os exemplos:

Exemplos efeitos no background

Primeiro, Sweep to Right:

Passe o mouse

Sweep to Left:

Passe o mouse

Sweep to Top:

Passe o mouse

Sweep to Bottom:

Passe o mouse

 

CSS do Sweep to Right

.sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-right:hover, .sweep-to-right:focus, .sweep-to-right:active {
  color: white;
}
.sweep-to-right:hover:before, .sweep-to-right:focus:before, .sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

CSS do Sweep to Left

.sweep-to-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-left:hover, .sweep-to-left:focus, .sweep-to-left:active {
  color: white;
}
.sweep-to-left:hover:before, .sweep-to-left:focus:before, .sweep-to-left:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

CSS do Sweep to Top

.sweep-to-top {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-top:hover, .sweep-to-top:focus, .sweep-to-top:active {
  color: white;
}
.sweep-to-top:hover:before, .sweep-to-top:focus:before, .sweep-to-top:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

CSS do Sweep to Bottom

.sweep-to-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-bottom:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-bottom:hover, .sweep-to-bottom:focus, .sweep-to-bottom:active {
  color: white;
}
.sweep-to-bottom:hover:before, .sweep-to-bottom:focus:before, .sweep-to-bottom:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

CSS reduzido

Código CSS reduzido dos 4 efeitos para você incluir em seu projeto

.sweep-to-bottom,.sweep-to-left,.sweep-to-right,.sweep-to-top{display:inline-block;vertical-align:middle;box-shadow:0 0 1px transparent}.sweep-to-right{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}.sweep-to-right:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#2098D1;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.sweep-to-bottom:before,.sweep-to-left:before{-webkit-transition-timing-function:ease-out;content:"";z-index:-1;top:0;left:0;right:0;bottom:0;background:#2098D1}.sweep-to-right:active,.sweep-to-right:focus,.sweep-to-right:hover{color:#fff}.sweep-to-right:active:before,.sweep-to-right:focus:before,.sweep-to-right:hover:before{-webkit-transform:scaleX(1);transform:scaleX(1)}.sweep-to-left{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}.sweep-to-left:before{position:absolute;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;transition-timing-function:ease-out}.sweep-to-left:active,.sweep-to-left:focus,.sweep-to-left:hover{color:#fff}.sweep-to-left:active:before,.sweep-to-left:focus:before,.sweep-to-left:hover:before{-webkit-transform:scaleX(1);transform:scaleX(1)}.sweep-to-bottom{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}.sweep-to-bottom:before{position:absolute;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;transition-timing-function:ease-out}.sweep-to-bottom:active,.sweep-to-bottom:focus,.sweep-to-bottom:hover{color:#fff}.sweep-to-bottom:active:before,.sweep-to-bottom:focus:before,.sweep-to-bottom:hover:before{-webkit-transform:scaleY(1);transform:scaleY(1)}.sweep-to-top{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}.sweep-to-top:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#2098D1;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.sweep-to-top:active,.sweep-to-top:focus,.sweep-to-top:hover{color:#fff}.sweep-to-top:active:before,.sweep-to-top:focus:before,.sweep-to-top:hover:before{-webkit-transform:scaleY(1);transform:scaleY(1)}

 

Tags: Efeitos no background, css3, efeitos de css
Tags: css3efeitos de cssEfeitos no background
Deixar um comentário

Conteúdo relacionado

Post Recentes

Cron do Magento 2 não roda: status missed e pending no cron_schedule

Pedido que não fatura e e-mail que não sai porque todo job fica missed: como ler a cron_schedule, conferir o…

12 horas atrás

Gerar slug de URL em PHP: acento, espaço e símbolo fora do endereço

Uma função curta em PHP 8.3 que transforma Camiseta Preta Tamanho GG em camiseta-preta-tamanho-gg, sem depender do locale do servidor.

1 dia atrás

Log de consentimento LGPD: a tabela MySQL que guarda a prova do aceite

O banner registra o clique só no navegador e some. Veja a tabela MySQL e o endpoint que gravam a…

2 dias atrás

Comando CLI Magento 2: criar a classe e registrar no di.xml

A classe do comando existe e o bin/magento list ignora ela. Falta o registro no di.xml: aqui vai a classe…

3 dias atrás

Traduzir o pt_BR.csv do Magento 2 em lote sem perder a coluna de origem

Como traduzir duas mil linhas do pt_BR.csv do Magento 2 lendo com fgetcsv e regravando com fputcsv, sem encostar na…

3 dias atrás

Variação não está disponível no WooCommerce: limpar transients e lookup

Produto variável respondendo "Desculpe, este produto não está disponível" mesmo com a variação ativa: limpe os transients do WooCommerce e…

4 dias atrás