Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Soneca_BO

Efeito Transição Css3

Recommended Posts

Bom dia,

 

Eu já desenvolvo web faz um tempo. um dia peguei um código web kit que quando mudava o tamanho da tela o meu responsivo não fazia a nimção muito rapida, mas fazia de uma forma suave e agradável.. só que não lembro exatamente o que fiz... alguém sabe algum efeito de transição que faça o ajuste suave nos box das div etc..

obs.: trabalho com todas div em % caso necessite, se não precisar uso px, para manter o conteúdo fixo. do layout ele esta ok.. só queria o efeito da transição de vagar.. tipo mudou o tamanho da tela ele faz um efeito tipo de slow..

 

desde já agradeço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

lembrei, para quem quiser esta o css para fazer a transição suave.

Obs.: para funcionar você tem que colocar  o elemento pai, ai todos elementos filhos abaixo vão se ajustar conforme a tela ajustar ou você criar um script que adapte algum conteúdo a tela.

 

.tag{

  1. -webkit-transition: all 1s ease-in-out;
  2. -moz-transition: all 1s ease-in-out;
  3. -o-transition: all 1s ease-in-out;
  4. transition: all 1s ease-in-out;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por douglas79
      Boa tarde, pessoal!!!
       
      Estou com um pequeno problema com essa tag aí. O que acontece?? Fiz tudo certo no código e no css, porém ao atualizar a página, o vídeo aparece, mas não executa. 
      Eis o código:
       
      <div class="box-esquerdo">
                      <video class="institucional" src="https://youtu.be/90uPbUirZ3I" controls="controls" autoplay="autoplay"></video>
       </div>
       
      Procurei em diversos tutoriais e falam pra atualizar o browser, porém já está atualizado e mesmo assim o erro continua. E no Edge (uso o Windows 10 64 bits), diz que a fonte é inválida.
      O que pode estar havendo??
      Alguém pode me ajudar nessa???
      Aguardo respostas!!!
      []'s
    • Por holasoycael
      Oi Pessoal!
      Eu estou ultilizando um slide desenvolvido com css3. Vim pedir ajudar aos universitarios. Precisso personaliar este slide removendo a target e mantendo o efeito.
       
      TARGET:



       
      É natural pelo codigo css ao selecionar a tela no menu ele busque a target. É possivel buscar a targert sem aparecer na barra URL?
       
      <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- HTML 4 --> <meta charset="utf-8"/><!-- HTML5 --> <style type="text/css"> *{margin:0;outline:0;padding:0;text-align:left;list-style:none;border:none;vertical-align:baseline;outline:none;} /* *Styling */ html,body { width: 100%; height: 100%; position: relative; } body { overflow: hidden; } header { background: #fff; position: fixed; left: 0; top: 0; width:100%; height: 3.5rem; z-index: 10; } nav { width: 100%; padding-top: 0.5rem; } nav ul { list-style: none; width: inherit; margin: 0; } ul li:nth-child( 3n + 1), #main .panel:nth-child( 3n + 1) { background: rgb( 0, 180, 255 ); } ul li:nth-child( 3n + 2), #main .panel:nth-child( 3n + 2) { background: rgb( 255, 65, 180 ); } ul li:nth-child( 3n + 3), #main .panel:nth-child( 3n + 3) { background: rgb( 0, 255, 180 ); } ul li { display: inline-block; margin: 0 8px; margin: 0 0.5rem; padding: 5px 8px; padding: 0.3rem 0.5rem; border-radius: 2px; line-height: 1.5; } ul li a { color: #fff; text-decoration: none; } .panel { width: 100%; height: 500px; z-index:0; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel h1 { font-family: sans-serif; font-size: 64px; font-size: 4rem; color: #fff; position:relative; line-height: 200px; top: 33%; text-align: center; margin: 0; } /* *Scrolling */ a[ id= "tela1" ]:target ~ #main article.panel { -webkit-transform: translateY( 0px); transform: translateY( 0px ); } a[ id= "tela2" ]:target ~ #main article.panel { -webkit-transform: translateY( -500px ); transform: translateY( -500px ); } a[ id= "tela3" ]:target ~ #main article.panel { -webkit-transform: translateY( -1000px ); transform: translateY( -1000px ); } </style> </head> <body> <a id="tela1"></a> <a id="tela2"></a> <a id="tela3"></a> <header class="nav"> <nav> <ul> <li><a href="#tela1">Tela 1</a></li> <li><a href="#tela2">Tela 2</a></li> <li><a href="#tela3">Tela 3</a></li> </ul> </nav> </header> <section id="main"> <article class="panel" id="tela1"> <h1> Conteúdo 1</h1> </article> <article class="panel" id="tela2"> <h1> Conteúdo 2</h1> </article> <article class="panel" id="tela3"> <h1> Conteúdo 3</h1> </article> </section> </body> </html>  
      DEMO:
      http://jsfiddle.net/ivanferrer/en0m7yk1/
    • Por BelleFisio
      Olá! Bom dia!
       
      Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva)
       
      Teria alguma forma de corrigir isso?
       
      O codigo esta assim:
      <div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div>  O CSS:
      .cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;}  
      Obrigada
       
       
    • Por teuzero
      esse é o link do meu site:https://xraros.000webhostapp.com/
       
      o problema é que no arquivo css test.css no bloco de código:
      eu escrevi esse código:
       
      @media screen and (min-width: 800px) and (max-width: 848px){ .busca { width:200px; } .barra { background:url(../img/barra.png)no-repeat; } } escrevi esse código:
      .barra { background:url(../img/barra.png)no-repeat; }  
      no index da pagina tem a div:
      <div class="barra"> </div>  
      mais no site não carrega essa imagem.
      como eu carrego essa imagem via css dentro de um div?
    • Por DinhoPHP
      estou há horas tentando utilizar o Carousel do Bootstrap para exibir produtos. Fiz sozinho não funcionou, então encontrei este código https://codepen.io/kreigd/pen/ybYNoN coloquei em um arquivo sozinho, separado do site que estou desenvolvendo e nem assim funciona. Fica assim: http://equipenovainfo.com.br/_portifolio/amanda/31_07_2019/carousel_prod.php
       
      Segue o código:
      <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, world!</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script> $(document).ready(function() { $("#myCarousel").on("slide.bs.carousel", function(e) { var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 3; var totalItems = $(".carousel-item").length; if (idx >= totalItems - (itemsPerSlide - 1)) { var it = itemsPerSlide - (totalItems - idx); for (var i = 0; i < it; i++) { // append slides to end if (e.direction == "left") { $(".carousel-item") .eq(i) .appendTo(".carousel-inner"); } else { $(".carousel-item") .eq(0) .appendTo($(this).find(".carousel-inner")); } } } }); }); </script> </head> <body> <div class="container-fluid"> <h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner row w-100 mx-auto"> <div class="carousel-item col-md-4 active"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 1</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 2</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 3</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 4</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 5</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 6</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 7</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> Preciso terminar esse trabalho, travei nisso. Me ajudará à pagar a faculdade e ganharei tempo para estudar. 
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.