Então, voltando a esse tutorial, o próximo passo é começar a trabalhar nos nossos C-s.
Então, precisamos criar um novo arquivo C S S e folhas de estilo público e chamá-lo.
Esse sucesso.
Então, se voltarmos aqui, vá para o nosso diretório público abrir folhas de estilo parece que ele já
está aberto e com um clique direito Criar novo arquivo e eu chamarei este.
Blanding é sim.
Agora, se eu abri-lo, está em branco e está pronto para ser preenchido
com todas as regras que irão modelar nossa página principal.
Então, de volta aqui, a primeira coisa que queremos fazer é abrir aprendendo. Danciu diz o que fizemos.
E queremos configurar a cor de fundo dos corpos para bloquear.
Você pode escolher qualquer cor que você gosta.
Eu só acho que parece bom desvanecer-se na primeira imagem de um fundo preto e então começar o
crossfade a partir daí.
Então, coloquei nesta regra, o que fizemos é selecionada a etiqueta do corpo e, em seguida, configura as costas na
cor para o hash.
0 0 0 que é o mesmo que preto.
Então, agora eu preciso de uma posição de todo o contexto e para ver todos os acampamentos que temos é selecionado
com um ID.
Então, vamos seguir em frente e usar o seletor IDs e esse é o cabeçalho Blowing.
E o que fizemos aqui é que tomamos esse texto e nós demos um índice z de 1.
Então, se você não sabe sobre o índice z, basicamente, a página da Web pode ser visualizada em um plano tridimensional.
Nós temos X e Y, que é esquerda e direita para cima e para baixo e então Z que está para a frente e para trás no espaço.
Então, se lhe darmos um índice z de 1, está vindo em nossa direção.
posição de algo diferente da estática estática é o valor de posição padrão para todos os seus elementos HTML .
E aquele em camadas em cima de qualquer outro conteúdo que tenha um índice Az menor do que
um para que possamos usar o índice z, temos que mudar a
E se você usar estática, ele realmente ignorará o índice z.
Agora, o que queremos fazer é centrar esse texto e o botão.
Então eu apenas uso o centro de alinhamento de texto aqui e isso nos levará centrados horizontalmente.
Agora, para que possamos subtrair verticalmente na página, na verdade, são muitas maneiras
diferentes de fazer isso, mas descobri que a maneira mais fácil de fazê-lo é usar a altura da vista.
Então, o que fazemos aqui é que nós colocamos o topo do estofamento até a altura da visão 40.
A razão pela qual eu não jogo aos 50 é porque isso realmente pressionaria o conteúdo para baixo.
E parece que está centrado.
Então, vamos salvar esta regra, volte aqui para atualizar e você pode ver que o fundo é
preto e o fundo.
Sim.
O texto não está centralizado na página se quisermos que possamos atualizar aqui.
Veja um pouco melhor.
Então, agora, o texto Bem-vindo ao seu acampamento é visivelmente visível, então mudamos isso aqui em um segundo.
E parece que apenas levamos a cabeça de aterrissagem ou o Slichter adicionamos um seletor H1 e
mudamos a cor para 1.
Então, adicione que aqui eu irei dizer que atualizar a página e agora é muito mais fácil ver o texto.
E quando conseguiremos o fundo lá, será mais fácil vê-lo também.
Então, a próxima coisa que queremos fazer é o estilo da lista desordenada.
E porque você sabe que a lista tem uma classe de apresentação de slides, é muito fácil para nós deslizar.
Então, eu tomarei essa regra e vamos conectá-la aqui.
página e então empurramos para cima no canto superior esquerdo da página usando posições de nível superior de zero.
Então, nós selecionamos o honorável com sua classe e nós ajustamos a posição afixada dentro da altura
para 100 por cento assim que vai ocupar toda a
E então, se você vê aqui, temos o índice z definido como zero.
Isso garantirá que as imagens de fundo estejam por trás do outro conteúdo, como sejam bem-vindos ao seu texto
em nossa visão ou nos campos de acampamento.
Defina nosso estilo de lista.
E nesta guerra, movem os pontos da bala desse jeito.
Não os vemos nos itens da lista.
E, finalmente, queremos garantir que não haja margem ou preenchimento.
Então, definimos os dois para zero.
Agora, salvamos que voltemos aqui e estávamos frescos.
Podemos ver que os pontos de bala que estavam no lado esquerdo aqui desapareceram.
Agora, precisamos fazer um estilo dos itens da lista individual.
aqui copiar, trazê-lo para o Intourist, o SS colá-lo abaixo da lista não descartada e o que temos aqui são os
mesmos shows de slides de pontos do seletor de classe para a lista de roteiros de honra e então estamos
dizendo isso para selecionar cada item da lista dentro da lista novamente, estabelecemos a largura e altura para 100%.
Então, vamos puxar esta regra
Desta vez, posicionamos a posição absoluta superior e esquerda ou zero novamente, o tamanho do fundo está configurado para cobrir.
E isso é o que permitirá que as imagens ocupem todo o espaço da página.
Nós também estabelecemos nossa posição de volta para 50 por cento 50 por cento.
E isso irá centrar as imagens perfeitamente na página.
Então, por fim, definimos o cenário feliz sem repetir.
Isto é, onde a imagem não está repetindo verticalmente ou horizontalmente.
e então usaremos a animação que vamos criar um pouco para desvendá-las lentamente em uma opacidade de uma.
Configuramos a nossa opacidade para zero porque queremos que nossas imagens começassem desaparecendo
Nós ajustamos o nosso índice z novamente para zero novamente, isso assegurará que as imagens de fundo sejam colocadas
atrás do texto e do botão.
A última propriedade que temos aqui é chamada de animação e isso é algo que não vimos antes.
Então, isso nos permitirá realmente desvendar imagens dentro e fora.
Então, o nome da animação é animação de imagem e isso é arbitrário, você pode chamá-lo
do que quiser, contanto que combine com a animação que vamos criar aqui em minutos e
então dizemos que a animação durará 50 segundos.
Certifique-se de que é linear e o que significa linear é que apenas mostra que a animação
é a mesma velocidade do começo ao fim.
E, finalmente, contamos a animação para loop infinitamente.
Dessa forma, nosso slide show nunca termina.
Então, podemos dizer isso, mas se nós visualizamos isso, nada vai mostrar ainda porque não temos a
animação configurada.
Também não temos imagens configuradas para os itens da lista individual.
Então, vamos em frente e faça isso agora.
Então, vamos copiar todo o item da lista de slides em seletores filho e isso é o
que vai adicionar as imagens de fundo aos itens da lista real.
Então, agora e podemos ver que há cinco itens de lista começando com a criança, que vai
até cinco.
Damos a cada um uma imagem de fundo a sua função e, se você quiser, pode vincular a esses locais ou
pode colocar as imagens dentro de seu diretório público dentro de um diretório de imagens.
Eu segui em frente e basta carregá-los usando a imagem ou este é um serviço de upload gratuito na web.
realmente destinado a hospedar imagens para usar em seu site, mas é uma solução rápida à mão usada.
Não é
A animação para a primeira imagem de fundo vai começar imediatamente.
Portanto, não precisamos dar uma demora de animação.
Queremos que cada imagem desapareça após 10 segundos da imagem anterior.
Então, eu ajuste o próximo atraso de animação de imagem para 10 segundos e então aumentamos em 10 para cada imagem depois disso.
Então, 20 segundos para o terceiro 30 para o quarto e 40 para o quinto, que nos
levará até 50 segundos e depois voltará para a imagem número um.
nada porque todas as peças são definidas para zero e não temos a animação configurada para desaparecer em uma.
Então, novamente, podemos seguir em frente e dizer o pouso no arquivo CSSA, mas ainda não vamos ver
Então, vá em frente e faça isso agora.
Então, vou copiar a regra de animação de imagem dos quadros-chave do tutorial e colá-lo aqui.
Então, o que estamos fazendo é tomar o seletor no quadro e dar à animação o nome da animação da imagem.
E isso coincide com o valor anterior que tivemos para a propriedade de animação em nossa apresentação
de slides era a regra de slide.
Então, temos isso no lugar o que faremos é indicar o que queremos ter acontecido em vários
quadros-chave dentro da animação.
Assim, a animação vai de zero por cento até 100 por cento, mas estamos preocupados apenas com zero
a 30 por cento.
Então o que acontece aqui é que começamos nossa animação em zero para a opacidade e, em seguida, até
10 por cento.
Nós deixamos isso desaparecer no espaço.
Quando deixamos a opacidade em um todo através de 20 por cento e, em seguida, encontramos de volta a zero
em 30 por cento.
temporização de animação de propriedades configurada para facilitar de 0 a 10 e, em seguida, também tende a diminuir.
Você também percebe que temos a função de
Então, isso nos dá uma transição mais suave, como Faden de 0 a 1.
Então, você pode estar se perguntando onde surgiu essas porcentagens.
Então, avancei e criei um gráfico da animação para ajudá-lo a visualizar melhor o que está acontecendo aqui.
Então, basicamente, temos uma imagem que irá animar de zero segundos a 10 segundos e a segunda imagem
passará de 10 para 20.
O terceiro de 20 a 30 e depois de 30 a 40 e, em seguida, 40 a 50 formando cinco imagens a 10 segundos cada.
desbotada na opacidade de um e depois de 10 segundos a 15 segundos, desaparecemos na próxima imagem.
Então, de zero segundos a 10 segundos, temos um Faden de cinco segundos e, então, temos a imagem ficando
Assim, isso pode ser representado por azul, que é desvanecido em vermelho, que é sollen e depois desaparece, que é laranja.
Assim, a primeira imagem vai de 0 por cento a 10 por cento e isso está desaparecendo de zero segundos a
cinco segundos e permanece sólido de 10 por cento a 20 por cento.
Então, você vê que temos 10 por cento a 20 por cento de pastoso um pastoso.
E então, de 20% a 30%, está realmente desaparecendo de uma volta para zero.
E como isso está acontecendo, a próxima imagem que a animação já começou em 10 segundos será de
zero a uma de 10 a 15.
E isso se sobrepõe aqui criando esse efeito de crossfade.
Então, isso permanece sólido por cinco segundos e então temos outra sobreposição à medida que desaparece
e a próxima imagem desaparece e o mesmo padrão se repete até chegar a 50 segundos, que é o final da nossa animação.
Esta imagem é sólida.
E então, vamos até o início, onde a imagem original fica desbotada enquanto a
quinta imagem desaparece e então começa de novo e faz um loop infinito.
Então, vamos em frente e guarde nossos EUA e abra a web cam.
Certifique-se de que seus servidores funcionem e atualizem e podemos ver a animação ao vivo.
Então, esta imagem é visível por cinco segundos e agora vai desaparecer à medida que a próxima imagem desaparecer.
Então, essa é uma transição de cinco segundos.
Recebemos mais cinco segundos dessa foto e depois desapareceremos na próxima.
Então, a última coisa que você quer fazer é garantir que nosso controle deslizante de fundo funcione em todos os navegadores.
Então, de volta ao tutorial aqui e no fundo, eu tenho essa regra aqui ou copie-a.
Traga de volta ao seu sucesso.
CSSA Klowns foi adicionada pelo modernizador e já tínhamos o CD dos modernizadores e aqui mesmo se
você quiser saber como achei que acabei de olhar up moderniser CDR e eu escolheu o primeiro.
Colá-lo no fundo e você vê que eu tenho esta vírgula que diz que os navegadores mais antigos suportam as animações não
Então eu acabei de copiar a versão do arquivo e então eu a adiciono a uma tag de script
na cabeça e eu configurei o script para uma sincronização que faz com que esse javascript funcione
simultaneamente com os outros recursos na página.
Então, se voltarmos para a CSSA, podemos ver que eles apenas têm a capacidade definida para 1.
Então, o que acontecerá aqui é que os navegadores que não suportam a integração de sistemas terão
apenas um slide visível e esse seria o plano de fundo dessa imagem.
Então, é isso para o controle deslizante de imagem de fundo em tela cheia.
Se você tiver alguma dúvida, como agora, e vou ver o próximo vídeo.
Obrigado.