Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''transition''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Todas as áreas do Fórum

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 7 registros

  1. Carlos Web Soluções Web

    Simples CSS Button Div transition

    Olá, pessoal, boa tarde !! Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !! Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando: <!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Me ajudem por favor ! Obrigado !!
  2. João Paulo Bianchi

    Transição automática de imagens no slider com css

    Bom dia pessoal, sou novo no Imasters e na parte de desenvolvimento em geral e estou com uma dúvida bem simples, não julguem kkk Criei esse slider descrito logo abaixo e não consigo fazer a troca de imagens automática. Por exemplo, a cada 3 segundos a imagem fazer um fade out e entrar outra com fade in básico, ou mesmo deslizar pro lado. A animação não tem tanta importancia. O que queria mesmo era fazer com que funcione o código pra automatizar a troca de imagens. Alguem poderia por favor me dar uma luz? Tentei algumas coisas aqui mas não consegui :/ Segue o slider: <div class="div-slider"> <ul class="slides-front"> <input type="radio" name="radio-btn" id="img-1" checked=""> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-1.png"> </div> <div class="nav"> <label for="img-3" class="prev">‹</label> <label for="img-2" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-2"> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-2.png"> </div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-3" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-3"> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-3.png"> </div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> </li> </ul> </div> E o CSS do mesmo: /*------------------- SLIDER FRONT PAGE - NOVIDADES ----------------------*/ @import url(https://fonts.googleapis.com/css?family=Varela+Round); .div-slider{ width: auto; height: 400px; text-align: center; } .slides-front { padding: 0; width: 980px; height: 370px; display: block; margin: auto; position: relative; } .slides-front * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .slides-front input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 980px; height: 370px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out 0.1s; } .slide img { width: 100%; height: 100%; } .nav label { width: 150px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 380px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out 0.1s; } input:checked + .slide-container .nav label { display: block; } .nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: relative; text-align: center; } .nav-dots .nav-dot { top: 375px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); } input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, { background: rgba(0, 0, 0, 0.8); } Acho que é isso (: Qualquer ajuda é bem vinda. Valeeeeu
  3. Eae pessoal tudo bem ? Seguinte estou aprendendo CSS, e fiz um menu um pouco animado. Ao passar a mouse sobre um Li ela mostra seus componentes com uma animação e delays diferentes. Meu problema é o seguinte, quando eu tiro o Mouse, os delays ainda acontecem deixando assim uma animação bem "Feia". Eu queria que ao tirar o mouse os itens voltassem ao mesmo tempo sem delay alguém pode me ajudar ? ( mais uma pergunta, estou aprendendo CSS3 e logo logo começo estudar JavaScript sabem me dizer se conseguria fazer animações como essa utilizando JavaScript mais facilmente ? ) Obrigado pela atenção o código esta abaixo <!doctype html> <html> <head> <meta charset="utf-8"> <title>Menu deslizante</title> <style> .container{ height: 500px; width: 200px; padding: 0px; overflow: hidden; } .menu{ width: 200px; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif"; color:whitesmoke; font-size: 13pt; } .menu ul{ list-style: none; position: relative; padding: 0px; } .menu ul ul { padding: 0; position:absolute; transform: translateX(200px); } .menu ul li:hover ul{ position: relative; transition:2s; } .menu ul li:nth-child(1){ transition:0.25s; } .menu ul li:hover ul li:nth-child(1){ transform: translateX(-190px); } .menu ul li:nth-child(2){ transition:0.25s; transition-delay: 0.25s; } .menu ul li:hover ul li:nth-child(2){ transform: translateX(-190px); } .menu ul li:nth-child(3){ transition:0.25s; transition-delay: 0.5s; } .menu ul li:hover ul li:nth-child(3){ transform: translateX(-190px); } .menu li{ padding: 15px; cursor: pointer; background-color: rgba(188,27,30,1.00); border-bottom: rgba(229,79,82,1.00) solid 1px; } </style> </head> <body> <div class="container"> <nav class="menu"> <ul> <li>Home</li> <li>Galeria</li> <li>Shop <ul> <li>Cell Cases</li> <li>Notebook Acessories</li> <li>To your House</li> </ul> </li> <li>Contacts</li> <li>About us</li> </ul> </nav> </div> </body> </html>
  4. Olá, eu estava desenvolvendo um projeto para a escola e queria fazer meio que um efeito de transição entre as páginas para quando forem selecionados os conteúdos, encontrei uma biblioteca que fazia umas transições legais e a baixei. Entretanto fui fazer algumas adaptações para o que eu queria, onde quando saísse a primeira, eu selecionasse o tipo de dado da segunda, mas, eu não consigo fazer isso, o menu não aparece. Segue a biblioteca e o meu código <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="A Collection of Page Transitions with CSS Animations" /> <meta name="keywords" content="page transition, css animation, website, effect, css3, jquery" /> <meta name="author" content="Codrops" /> <link rel="stylesheet" type="text/css" href="transition/css/default.css" /> <link rel="stylesheet" type="text/css" href="transition/css/multilevelmenu.css" /> <link rel="stylesheet" type="text/css" href="transition/css/component.css" /> <link rel="stylesheet" type="text/css" href="transition/css/animations.css" /> <script src="transition/js/modernizr.custom.js"></script> </head> <body> <!-- /triggers --> <div id="pt-main" class="pt-perspective"> <div class="pt-page pt-page-1"><h1>Gerenciar</h1> <ul class="dl-menu"> <li data-animation="25"><a>aaaa</a></li> </ul> <div class="pt-triggers"> <div id="dl-menu" class="dl-menuwrapper"> <button class="dl-trigger">Selecione o comando</button> <ul class="dl-menu"> <li data-animation="36"> <a href="#">Listar</a> </li> <li data-animation="36"> <a href="#">Alterar</a> </li> <li data-animation="36"> <a href="#">Deletar</a> </li> </ul> </div> </div> </div> <div class="pt-page pt-page-2"><h1><span>Selecione</span></h1> <div class="pt-triggers "> <div id="dl-menu" class="dl-menuwrapper"> <button class="dl-trigger">Selecione tipo de dado</button> <ul class="dl-menu"> <li data-animation="36"> <a href="#">Fornecedor</a> </li> <li data-animation="36"> <a href="#">Produto</a> </li> <li data-animation="36"> <a href="#">CLiente</a> </li> <li data-animation="36"> <a href="#">Administrador</a> </li> </ul> </div> </div> </div> <div class="pt-page pt-page-3"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div> <div class="pt-page pt-page-4"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div> <div class="pt-page pt-page-5"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div> <div class="pt-page pt-page-6"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div> </div> <div class="pt-message"> <p>Your browser does not support CSS animations.</p> </div> <script src="js/jquery-3.1.1.min.js"></script> <script src="transition/js/jquery.dlmenu.js"></script> <script src="transition/js/pagetransitions.js"></script> </body> </html> PageTransitions-master.rar
  5. DiogoJefferson

    como fazer efeito para Div subir suavemente?

    Olá, Estou tentando fazer um efeito onde uma div sobe suavemente. Até consegui fazê-la subir, porém não com o efeito que gostaria. O efeito que gostaria de aplicar é o mesmo encontrado nos quatro blocos dispostos horizontalmente no site http://www.ambev.com.br/ , logo na página inicial. Alguém poderia me ajudar? Segue meu código até então: CSS: <style> #servico1{ background-color: green; height:300px; width:200px; overflow:hidden; } #efeito1{ position:relative; width:100%; height:300px; top:-150px; background-color: #030303; opacity:0.5; cursor:pointer; } #efeito1:hover{ top:-300px; transition: all .1s linear; } </style> HTML: <div id="servico1"> <img src="imagens/drone.jpg" alt="imagem" /> <div id="efeito1"> <h1>AEROFOTOGAMETRIA</h1> <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para... </p> </div> </div> Pensei em usar a propriedade animate() do jQuery, porém não mudou muita coisa.
  6. Iskandar

    Vue/jQuery Transition/Animation

    Boa noite pessoal, minha dúvida é bem simples. Queria saber como uso transitions/animations no Vue, sem precisar do v-if. Se é que é possível. Em minha aplicação utilizo Vue com o Bootstrap e queria utilizar as animações nos menus Dropdown, tipo clica no botão e o dropdown aparece com alguma animação, em seguida ele some com outra animação. Alguém sabe como? Agradeço.
  7. Olá pessoal, Estou com um problema.. Coloquei um efeito no caption do carousel do bootstrap, porém ele está sem transition out. Eu uso esse mesmo efeito em outras partes do layout, porém em buttons e ele está funcionando normalmente. Acredito que seja por causa do visible hidden e opacity que coloquei... porém ele precisa ser dessa forma, tem que aparecer apenas quando passa o mouse na imagem. Segue o código como está agora no jsfiddle. http://jsfiddle.net/fabricior/cvx1fjzm/ Ajudemm!! =) Valeu!
×

Informação importante

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