Ir para conteúdo
marcelocardoso

collapse para exibir no thunderbird, gmail etc...

Recommended Posts

galera...
este código abaixo é com código para fazer COLLAPSE, funciona perfeitamente em brownsers, porém no THUNDERBIRD e programas de emails, enfrento problemas, mas tentando aqui, copiando código alí e aqui, consegui resolver para que funcione no THUNDERBIRD. 

 

       .collapseCss {
            margin-top: 50px;
            width: 50%;
        }

        .collapseCss .collapseContent {
            margin-bottom: 4px;
            margin-bottom: 15px;
        }

        .collapseCss .collapseHeader,
        .collapseCss .collapseBody {
            padding: 10px;
            display: block;
            border: 1px solid #dbdbdb;
        }

        .collapseCss .collapseHeader {
            width: 100%;
            border: 1px solid #dbdbdb;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color .15s ease-in-out;
        }

        .collapseCss .collapseHeader:hover {
            background-color: #dbdbdb;
        }

        .collapseCss .collapseBody {
            background-color: #f4f4f4;
            margin-top: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            display: none;
        }

        .collapseCss .collapseContent:hover .collapseBody {
            display: block;
        }

    </style>

    <div class="collapseCss">
         <div class="collapseContent">
            <div class="collapseHeader">Collapse2</div>
            <div class="collapseBody">Content collapse2.</div>
        </div>
    </div>

Agora, tipo.
Ao passar o mouse em cima, clicar, ele EXPANDE.
até ai, td bem...

mas COMO POSSO ao passar o mouse, clicar, ele fixar FIXO, depois de sair o foco.
e depois somente, quando clicar novamente, ele RETORNE ao modo COLLAPSE.

Mas lembrando, programas de emails, não suportam javascript, jquery, então, tem que ser só em CSS, tem COMO isso acima?
sugestões, agradeço de como implementar...

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

basicamente oq preciso, é:

1) expandir o collapse no hover;
2) em seguida deixar ele aberto fixo na tela;
3) depois, só retornar se eu clicar novamente no objeto;

que tag css posso usar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

GALERA

Para ser melhor na explicação, seguem outros dois exemplos que testei no THUNDERBIRD, onde eles funcionam este COLLAPSE:

HTML

    <div class="container">
        <div class="collapse_html">
            <div class="collapse_conteudo">
                <div class="collapse_header">COLLAPSE - Esse funciona em programa de emails</div>
                <div class="collapse_body">Depending on what browsers to put up with for non-compliant browsers you may want to check out the</div>
            </div>
        </div>
    </div>


    <div class="container">
        <span><b>COLLAPSE - Não funciona em programas de emails</b></span>
        <ul>
            <li>
                Depending on what browsers/devices you are looking to browsers you may want to check out the
            </li>
        </ul>
    </div>

CSS
 


        .collapse_html {
            margin-top: 50px;
            width: 50%;
        }
        .collapse_html .collapse_conteudo {
            margin-bottom: 4px;
            margin-bottom: 15px;
        }
        .collapse_html .collapse_header,
        .collapse_html .collapse_body {
            padding: 10px;
            display: block;
            border: 1px solid #dbdbdb;
        }
        .collapse_html .collapse_header {
            width: 100%;
            border: 1px solid #dbdbdb;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color .15s ease-in-out;
        }
        .collapse_html .collapse_header:hover {
            background-color: #dbdbdb;
        }
        .collapse_html .collapse_body {
            background-color: #f4f4f4;
            margin-top: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            display: none;
        }
        .collapse_html .collapse_conteudo:hover .collapse_body {
            display: block;
        }
		li {
            padding: 5px;
        }
        ul {
            overflow: hidden;
            max-height: 0px;
            list-style: none;
            transition: max-height 0.3s;
        }
        span:hover+ul {
            max-height: 500px;
            position: fixed;
            background-color: dodgerblue;
            color: white;
            width: 100%;
            height: auto;
            padding: 5px;
        }

A única coisa que gostaria de FAZER é: ambos os dois exemplos acima, ao PASSAR O MOUSE, ele exibe pelo HOVER a DIV abaixo, porém, EU GOSTARIA DE ao exibir, DEIXAR a DIV FIXA, mesmo ao tirar o ponteiro do mouse de cima.

TEM COMO FAZER isso, tem alguma taxa para usar no HOVER????

1) Deixar a DIV fixa na tela ao passar o mouse em cima do link;
2) Só fechar a DIV se clicar DAÍ no link novamente,

Tem como?
Sugestões de códigos, exemplos agradeço.
É o único collapse que testei que funciona no thunderbird, só preciso fazer isso....

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora


  • Conteúdo Similar

    • Por uninerds
      Olá pessoal, estamos criando algumas vídeo aulas de programação em HTML5 e CSS e gostaríamos que vocês dessem críticas e sugestões do que podemos estar fazendo para melhorar
      Segue o link da playlist com 20 vídeos de HTML5
      https://www.youtube.com/playlist?list=PLi3qhjm7dbeeC5h0NDfUiRqEvE0v08Pdd
       
      1 - O que é HTML, CSS e JavaScript?
      É explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web
       
      2 - Programas Necessários
      É mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)
       
      3 - Primeiro HTML5
      Começamos a mostrar de fato como começar a programar em HTML e como fazer para validar o código
       
      4 - Hierarquia de títulos e linha horizontal
      Como fazer hierarquia de títulos e colocar linha horizontal
      Tags: h1 até h6 e hr
       
      5 - Parágrafo, quebra de linha e texto pré-formatado
      Como fazer parágrafo, quebra de linha e texto pré-formatado
      Tags: p, br e pre
       
      6 - Formatação de texto
      Como fazer formatação de texto
      Tags: b, strong, i, em, mark, small, sub, sup, ins e del
      Atributos: cite e datetime das tags ins e del
       
      7 - Citações
      Como fazer citações
      Tags: q, blockquote, cite, address, abbr e bdo
      Atributos: title da tag abbr, dir da tag bdo e cite das tags q e blockquote
       
      8 - Comentários e comentários condicionais
      Como fazer comentário e para que serve
       
      9 - Arquivo Externo
      Como fazer referência de arquivo externo no HTML
       
      10 - Links | Parte 1
      Como fazer links para abrir outros HTML, enviar e-mail, executar JavaScript e direcionar para um local específico
      Tag: a
      Atributos: href, hreflang e type
       
      11 - Links | Parte 2
      Como criar links para download, diferentes formas de abrir no navegador e vulnerabilidade do target="_blank"
      Tag: a
      Atributos: download e target
      Valores para o target: _self, _blank, _top e _parent
       
      12 - Links | Parte 3
      Como resolver vulnerabilidade do target="_blank" e o atributo rel
      Tag: a
      Atributo: rel
      Valores para o rel: alternate, author, bookmark, prev, next, external, help, license, search, tag, nofollow, noreferrer, noopener
       
      13 - Bloco e Linha
      O conceito de tag de bloco e de linha
      Tags: div e span
       
      14 - Imagem | Parte 1
      Como colocar imagem no HTML
      Tag: img
      Atributos: src, alt, width, height, crossorigin, ismap e longdesc
      Valores para o crossorigin: anonymous e use-credentials
       
      15 - Imagem | Parte 2
      Como fazer mapeamento de imagem para colocar link dentro dela
      Tags: img, map e area
      Atributo da img: usemap
      Atributo da map: name
      Atributos da area: shape, coords e alt
      Valores para o shape: circle, rect e poly
       
      16 - Imagem | Parte 3
      Como definir imagens diferentes para dispositivos com características de tela diferentes
      Tags: img, picture e source
      Atributos da img: srcset e sizes
      Atributos da source: srcset, sizes, media e type
       
      17 - Tabela | Parte 1
      Como criar tabela em HTML
      Tags: table, caption, tr, th e td
      Atributos da th: abbr, sorted e scope
      Atributos da th e da td: colspan, rowspan e headers
      Valores para o scope: col, colgroup, row e rowgroup
       
      18 - Tabela | Parte 2
      Como altarar estilo de uma coluna inteira e definir cabeçalho, corpo e rodapé da tabela
      Tags: colgroup, col, thead, tbody e tfoot
      Atributo da colgroup e col: span
       
      19 - Lista
      Como criar lista não-ordenada, ordenada e de descrição
      Tags: ul, li, ol, dl, dt e dd
      Atributos da ol: type, reversed e start
      Atributos da li quando estiver na ol: value
      Valores para o type: 1, a, A, i e I
       
      20 - Iframe
      Como colocar uma página dentro de outra em HTML
      Tag: iframe
      Atributos: src, srcdoc, width, height, name e sandbox
      Valores para o sandbox: allow-pointer-lock, allow-scripts, allow-forms, allow-top-navigation, allow-same-origin e allow-popups
       
      Segue o link da playlist com 15 vídeos de CSS
      https://www.youtube.com/playlist?list=PLi3qhjm7dbedkcSwqOrGYHD_E_0H7Nopj
       
      1 - O que é HTML, CSS e JavaScript?
      É explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web
       
      2 - Programas Necessários
      É mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)
       
      3 - Primeiro CSS
      Como fazer a integração entre HTML e CSS
       
      4 - Cores
      Como definir cor por nome, hexadecimal, RGB, HSL, RGBA e HSLA
       
      5 - Initial e Inherit
      Como utilizar os valores initial e inherit para propriedades em CSS
       
      6 - Consulta de mídia
      Como definir estilos diferentes para tipos de dispositivos diferentes e mesmo tipo de dispositivo com características diferentes
       
      7 - Borda | Parte 1
      Como fazer bordas em CSS
      Propriedades: border, border-color, border-radius, border-style e border-width
      Valor para border-color: transparent
      Valores para border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset
      Valores para border-width: medium, thin e thick
       
      8 - Borda | Parte 2
      Como alterar as propriedades da borda em cada lado
      Propriedades: border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-left, border-left-color, border-left-style, border-left-width, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-right, border-right-color, border-right-style, border-right-width, border-top, border-top-color, border-top-style e border-top-width
       
      9 - Largura e Altura
      Como definir largura e altura em CSS e também valor mínimo e máximo para cada uma
      Propriedades: width, height, min-width, max-width, min-height e max-height
       
      10 - Margem
      Como colocar margem em CSS, centralizar conteúdo e um cuidado que deve ter ao utilizar margem
      Propriedades: margin, margin-top, margin-right, margin-bottom e margin-left
       
      11 - Preenchimento
      Como colocar preenchimento em CSS
      Propriedades: padding, padding-top, padding-right, padding-bottom e padding-left
       
      12 - Excesso
      O que fazer quando o conteúdo de uma tag é maior que a largura e/ou altura
      Propriedades: overflow, overflow-x e overflow-y
      Valores para as propriedades: visible, hidden, scroll e auto
       
      13 - Modelo de Caixa
      Qual é o conceito de modelo de caixa e porque é importante conhecer ele para montar o layout de uma página
       
      14 - Fundo
      Como alterar a cor de fundo, colocar imagem como fundo e definir a posição da mesma
      Propriedades: background, background-color, background-image, background-repeat, background-attachment e background-position
      Valores para background-repeat: repeat, repeat-x, repeat-y, no-repeat, space e round
      Valores para background-attachment: scroll, fixed e local
      Valores para background-position: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom
       
      15 - Contorno
      Como colocar contorno no conteúdo utilizando CSS
      Propriedades: outline, outline-color, outline-style, outline-width e outline-offset
      Valor para outline-color: invert
      Valores para outline-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset
      Valores para outline-width: medium, thin e thick
       
      PS:
      - Como temos nossos serviços seculares que é como conseguimos o sustento não teremos como responder todos os comentários de imediato, mas de qualquer forma agradecemos desde já a ajuda
      - Sempre que tiver vídeo novo atualizaremos este tópico
    • Por Carcleo
      Bom Dia!
      Tenho a seguinte página
      <!doctype html> <html> <head> <meta charset="utf-8"> <title>Slider</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="_css/aos.css"> <link rel="stylesheet" type="text/css" href="_css/jquery.cycle2.css"> <script type="text/javascript" src="_js/jquery.js"></script> <script type="text/javascript" src="_js/jquery.cycle2.min.js"></script> <style> @import url('http://fonts.googleapis.com/css?family=Open+Sans'); * { font-family: 'Open Sans'; margin: 0; padding: 0; box-sizing: content-box; } img { border: 0; max-width: 100%; } ul { list-style: none; } ul li { display: inline; } .aos-all { width: 1000px; max-width: 98%; margin: 10vh auto 0 auto; } .aos-item { display: inline-block; float: left; width: 40%; height: 300px; padding: 20px; } .aos-item__inner { position: relative; width: 100%; height: 100%; float: left; background: #1da4e2; line-height: 260px; text-align: center; color: #fff; } @media screen and (max-width: 800px) { .aos-item { width: 50%; } } .logo { width : 432px; -webkit-animation : logo-anim 1s; -moz-animation : logo-anim 1s; -o-animation : logo-anim 1s; animation : logo-anim 1s; } @-webkit-keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } @-moz-keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } @-o-keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } @keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } .logo-atividades { position : absolute; top : 0; center : 0; width : 100%; height : 500px; text-align : center; overflow : hidden; z-index : 20; } .atividades { color : #FFF; height : 115px; overflow : hidden; position : absolute; top : 80%; margin-top : -176px; width : 100%; pointer-events : none; text-align : center; z-index : 10; } .atividades a { text-decoration : none; } .atividades ul { list-style : none; padding : 0; margin : 10px 0 0; position : relative; height : 100px; font-size : 36px; font-weight : 300; text-align : center; font-family : 'Lato', sans-serif; letter-spacing : 5px; text-transform : uppercase; z-index : 100; } .atividades ul li { width : 100%; text-align : center; position : absolute; opacity : 0; top : 85px; line-height : 100px; -webkit-transition : all 0.5s ease-in-out; -moz-transition : all 0.5s ease-in-out; -o-transition : all 0.5s ease-in-out; transition : all 0.5s ease-in-out; transition-timing-function : ease; -webkit-transition-timing-function : ease; /* Safari and Chrome */ } .atividades ul li.ativa { opacity : 1; top : 0; -webkit-transition : all 1s ease-in-out; -moz-transition : all 1s ease-in-out; -o-transition : all 1s ease-in-out; transition : all 1s ease-in-out; transition-timing-function : ease; -webkit-transition-timing-function : ease; /* Safari and Chrome */ } } </style> </head> <body> <div class="cycle-slideshow" data-cycle-fx=fadeout data-cycle-timeout=5000 data-cycle-pause-on-hover="true" data-cycle-slides="div.slide"> <div class="logo-atividades"> <div style="margin-top: 100px;"> <a href="http://www.funerariasaopedro.net.br"> <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> </a> <div class="atividades"> <ul> <li class="ativa">Agência Funerária</li> <li>Funerais</li> <li>Cremações</li> <li>Trasladações</li> <li>Tanatopraxias</li> <li>Exumações</li> <li>Artigos Religiosos</li> <li>Atendimento 24h</li> </ul> </div> </div> </div> <!-- prev/next links --> <div class="cycle-prev"></div> <div class="cycle-next"></div> <div class="cycle-pager"></div> <div class="slide"> <img src="_img/_banner/_site/1.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/2.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/3.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/4.png" /> </div> </div> <div class="aos-item" data-aos="fade-right"> <div class="aos-item__inner"> <h3>Esquerda</h3> </div> </div> <div class="aos-item" data-aos="fade-left"> <div class="aos-item__inner"> <h3>Direita</h3> </div> </div> <div class="aos-item" data-aos="fade-up"> <div class="aos-item__inner"> <h3>Baixo Cima</h3> </div> </div> <div class="aos-item" data-aos="fade-down"> <div class="aos-item__inner"> <h3>Cima Baixo</h3> </div> </div> <div class="aos-item" data-aos="fade-in"> <div class="aos-item__inner"> <h3>Baixo Cima</h3> </div> </div> <div class="aos-item" data-aos="fade-in"> <div class="aos-item__inner"> <h3>Cima Baixo</h3> </div> </div> <script> function homeTitleAnimation(){ var interval; var counter = 1; var myFunc = function() { var cur = $('.atividades ul li').length; if(cur == counter) { $('.atividades ul li.ativa').removeClass('ativa'); $('.atividades ul li').first().addClass('ativa'); counter = 1; } else { counter++; $('.atividades ul li.ativa').removeClass('ativa').next().addClass('ativa'); } }; interval = setInterval(myFunc, 4000); } homeTitleAnimation(); </script> <script src="_js/aos.js"></script> <script> AOS.init({ easing: 'ease-in-out-sine' }); </script> </body> </html> Tudo funciona corretamente com exceção do posicionamento da logo e da ul  que rodam sobre o Slideshow que não estou conseguindo posiciona-los sobre o Slideshow.
      <div class="cycle-slideshow" data-cycle-fx=fadeout data-cycle-timeout=5000 data-cycle-pause-on-hover="true" data-cycle-slides="div.slide"> <div class="logo-atividades"> <div style="margin-top: 100px;"> <a href="http://www.funerariasaopedro.net.br"> <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> </a> <div class="atividades"> <ul> <li class="ativa">Agência Funerária</li> <li>Funerais</li> <li>Cremações</li> <li>Trasladações</li> <li>Tanatopraxias</li> <li>Exumações</li> <li>Artigos Religiosos</li> <li>Atendimento 24h</li> </ul> </div> </div> </div> <!-- prev/next links --> <div class="cycle-prev"></div> <div class="cycle-next"></div> <div class="cycle-pager"></div> <div class="slide"> <img src="_img/_banner/_site/1.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/2.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/3.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/4.png" /> </div> </div> Onde estou errando?
      Esse código pode ser visto em :
      http://funerariasaopedro.net.br/novo/
       
      Na página, se derem um ctr+a, poderão notar no canto direito e abaixo do slide,  a ul rodando normalmente. Porém a posição correta dela é no meio do slide e ao centro.
       
      Com relação à logomarca que está escondida atrás do slide, sua posição é acima do slide e acima da ul
    • Por hmarcio
      Boa tarde!

      Não sei o nome disso e to tentando desenvolver um para o meu site!
      Se alguém souber ou tiver algum tutorial!

      Obrigado!

      Resolvido!
    • Por Vitor Leite
      Oi galera. Beleza?
      Faz um tempo que não mexo com CSS e quase esqueci tudo. kkk
       
      Comecei num projeto para treinar e achei um problema que não consigo resolver.
      Fiz um menu dropdown básico, e preciso animar o dropdown, mas não consigo de jeito algum.
      Tentei utilizar o transition mas não vai de maneira alguma.
       
      Deem uma olhada no código e vê se é possivel me dar uma ajuda.
       
      Valeu! Boa semana.
       
      Código HTML:
      <nav> <div class="dropdown"> <button class="dropbtn"><a href="#"></a>MENU</button> <div class="dropdown-content"> <a href="#">Página Inicial</a> <a href="#">Como funciona?</a> <span><img style="width:32px; height:32px;" src="img/default.png"/>Seja bem vindo, Vítor.</span> <a class="log1" href="#">Perfil<span style="padding:0; float:right; color:#FFF;" class="oi" data-glyph="person"></span></a> <a class="log2" href="#">Sair<span style="padding:0; float:right; color:#FFF;" class="oi" data-glyph="account-login"></span></a> </div> </div> </nav> Código CSS:
      .dropbtn { background:url(../img/space.png); width:90px; height:50px; text-align:right; color: white; padding:0px; font-size: 19px; border: none; cursor: pointer; margin-top:0px; outline:none; -webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); -moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); -o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */ float:left; } .dropbtn a { width:28px; height:21px; margin-top:3px; background: url(../img/three.png); float:left; } .dropbtn:hover { opacity:0.5; } .dropdown { float:left; width:95px; height:50px; margin-top:20px; position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: block; position: absolute; top:50px; background-color: #131920; min-width: 250px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; font-weight: 300; font-size:15px; display: block; border-bottom:1px solid #0E1319; } .dropdown-content span { color: #7D9EC4; padding: 12px 16px; text-decoration: none; font-weight: 300; font-size:15px; display: block; } .dropdown-content img { margin-right:10px; vertical-align: middle; } /* Change color of dropdown links on hover */ .dropdown-content a:hover { background-color: #19222B; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; }  
       
    • Por Alanartes
      Tenho esse script que fica trocando as imagens do backgraund, agora quero criar um efeito fade, abaixo tenho um css que faz isso numa página, alguém pode dar uma dica:
       
      Script funcionado:
      <script type="text/javascript">// <![CDATA[ var imageCount = 0; var currentImage = 0; var images = new Array(); images[0] = 'fotos/1.png'; images[1] = 'fotos/2.png'; images[2] = 'fotos/3.png'; images[3] = 'fotos/4.png'; images[4] = 'fotos/5.png'; var preLoadImages = new Array(); for (var i = 0; i < images.length; i++) { if (images[i] == "") break; preLoadImages[i] = new Image(); preLoadImages[i].src = images[i]; imageCount++; } function startSlideShow() { if (document.body && imageCount > 0) { document.body.style.backgroundImage = "url("+images[currentImage]+")"; document.body.style.backgroundAttachment = "fixed"; document.body.style.backgroundRepeat = "no-repeat"; document.body.style.backgroundPosition = "center center"; document.body.style.backgroundSize = "100% 100%"; currentImage = currentImage + 1; if (currentImage > (imageCount-1)) { currentImage = 0; } setTimeout('startSlideShow()', 3000); } } startSlideShow(); // ]]></script> Efeito CSS desejado:
      @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation: fadeIn 3s ease-in-out; -moz-animation: fadeIn 3s ease-in-out; -o-animation: fadeIn 3s ease-in-out; animation: fadeIn 3s ease-in-out; }  
×

Informação importante

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