Crie 10 projetos criativos de web com HTML e CSS

1. Introdução: Bem-vindo ao curso Brand New, onde você pode aprender sobre como criar projetos web criativos e bonitos. Juntos, construiremos dez projetos web criativos diferentes com HTML e CSS puros. Se você tem algum conhecimento básico dessas tecnologias e ainda tem problemas para criar seus próprios projetos na web, ou se deseja aprimorar suas habilidades de desenvolvedor e design , você veio ao lugar certo. Criamos este curso para oferecer aos alunos a melhor experiência em HTML e CSS e permitir que eles criem belos projetos criativos. Construiremos dez projetos web diferentes, e eles estarão cheios de designs de efeitos modernos, bonitos e bonitos . Começaremos com projetos relativamente simples e também passaremos por alguns avançados. Podemos garantir que você ganhará uma sólida experiência e conhecimento na criação de efeitos muito legais e legais após concluir este curso. Usando este curso, você pode obter as inspirações que ajudarão você a aprimorar seus projetos e personalizar seu portfólio Dominando apenas essas tecnologias básicas desenvolvimento de Front e Bob, você pode criar temas incríveis e modernos e simplesmente se destacar. O curso será interessante e útil. Eu recomendaria que você tentasse tirar o máximo proveito deste curso sem apenas copiar e colar o código Se eu estivesse no seu lugar, eu definitivamente aceitaria assim. Então junte-se a nós. 2. Projetos: Olá e bem-vindo ao curso. Espero que este seja o curso certo e que você aproveite os projetos que vamos construir ao longo do curso. Como você já sabe, vamos criar dez projetos web criativos e bonitos diferentes. Todos esses projetos serão construídos com base em HTML e CSS. Gostaria de mencionar que você deve ter um conhecimento básico dessas tecnologias para acompanhar as palestras e não se confundir Os projetos estarão repletos de diferentes técnicas e truques modernos. Você poderá aprender como criar efeitos e animações bonitos e bonitos, que podem ser usados como inspiração para desenvolver e personalizar seu próprio portfólio Como mencionei, construiremos dez projetos. Eles são modelos independentes, então você não precisa examiná-los em ordem. Você pode criar qualquer um dos projetos que quiser a partir do mínimo. Depende totalmente de você. Tudo bem, agora vou examinar cada projeto e descrevê-los brevemente. O primeiro projeto que vamos construir é um quadrado de salto Como você pode ver, temos aqui um quadrado que está pulando em algo parecido com o ruber Ele muda de forma e também esses carrapatos se inclinam para criar o efeito natural Em seguida, vamos criar essa landing page. Se recarregarmos a página , você verá a imagem de fundo em tela cheia com uma boa animação Depois de exibido, ele muda de forma . Depois disso, criaremos uma animação de bola. Como você pode ver, temos aqui uma bola animada que está se movendo para cima e para baixo. Está atingindo os quadrados que vêm dos lados esquerdo e direito Além disso, temos aqui um fundo em movimento que cria a ilusão de que a bola se move para cima Tudo bem, a seguir teremos a Terra animada. Como você pode ver, temos aqui duas partes diferentes. No lado esquerdo, parte escura da Terra. No lado direito, há uma parte clara. A própria Terra está girando de acordo com seu eixo Y. Em seguida, vem o fluxo. A flor será a normal, com algumas pétalas e um caule Lembre-se de que vamos criá-lo apenas com ML e CSS. Depois disso, criaremos uma animação atômica. Como você pode ver, temos aqui um átomo típico, que você pode ter visto em sua aula de química ou pode ter se deparado com um dos logotipos de editores populares. Quero dizer, o átomo. Temos aqui alguns círculos com bolas que se movem ao redor da bola principal. Tudo bem, o próximo projeto será um helicóptero. Temos aqui um efeito voador. O helicóptero está sobrevoando a cidade, as pás estão Todo esse helicóptero foi criado com H, M e CSS. E, na verdade, não é uma imagem. Gostaria de mencionar que o efeito de voo parece muito mais realista quando você executa o projeto no navegador. Não parece muito realista no vídeo por causa dos quadros. Não se preocupe, ficará muito melhor quando você o construir sozinho. Ok, o próximo projeto será a bicicleta que temos aqui, a bicicleta típica. Como você pode ver, as rodas e os pedais estão se movendo, parece que a bicicleta está andando O próximo projeto será uma sala de três D. Temos aqui uma mesa na sala com uma carta. Depois de clicar no botão, ler a carta , chegaremos à mesa e a letra girará Depois disso, será o último projeto, que será um swing de três D. Temos aqui alguns balanços. Eles estão se movendo em três espaços D. Além disso, você pode ver aqui a bola se movendo nesses balanços. Tudo bem, isso é tudo sobre os projetos que vamos construir ao longo do curso. Espero que sejam interessantes, você goste e aprenda coisas novas. Então, vamos começar. 3. Configuração: Olá e bem-vindo ao curso. Estamos muito satisfeitos por ter você aqui e estamos confiantes de que você achará este curso agradável Antes de começarmos a mergulhar em nosso projeto, vamos primeiro preparar nosso ambiente de trabalho. Se você já está configurado e pronto para escrever código, pode pular este vídeo e ir direto para o projeto No entanto, se você ainda não estiver preparado , tudo bem. Orientaremos você na configuração algumas ferramentas essenciais ao longo deste curso. Você precisará de duas ferramentas principais um navegador moderno e um editor de texto. Para o nosso navegador, usarei o Google Chrome, mas também recomendo o Mozilla, o Firefox Você provavelmente já tem esses navegadores, mas vamos ver rapidamente como baixá-los Para obter o Google Chrome, basta visitar esse URL e baixar o navegador. O processo de instalação é simples, por isso não vamos gastar muito tempo nele Para Mozilla, Firefox, você pode obtê-lo neste URL. Ambos os links serão incluídos nesta palestra para sua conveniência Tudo bem, agora vamos falar sobre o editor de texto. Usaremos o Visual Studio Code , que é um dos melhores editores de texto disponíveis atualmente No entanto, você pode usar seu editor de texto preferido, se tiver um. Ainda depende inteiramente de você. Eu recomendo dar um código do Visual Studio a. Tente baixar o código do Visual Studio, visite este site e selecione a versão para seu sistema operacional, Windows, Mac ou Linux. O processo de instalação Visual Studio Code também é simples Você não deve encontrar nenhum problema. Depois de instalar essas duas ferramentas, você estará pronto para começar o curso. Vamos direto ao assunto. 4. Projeto 1 - Jumping Square: Tudo bem, estamos prontos para começar a construir nossos projetos. Neste vídeo, vamos criar o primeiro projeto que é um quadrado de salto Como você pode ver, temos aqui um quadrado que está pulando em algo parecido com o ruber Ele muda a forma e esses palitos também se inclinam para criar o efeito natural Ok, isso é tudo sobre o projeto, vamos começar. Eu criei uma nova pasta na área de trabalho chamada jumping square, que agora está vazia Vamos abrir essa pasta como código e criar nossos arquivos de trabalho. Quero dizer, indexar HTML e estilo CSS. Em seguida, abra o arquivo HTML com pontos de índice e crie um documento HTML básico. Vamos colocar aqui um ponto de exclamação e, em seguida, pressionar Top ou Enter OK. Primeiro de tudo, vamos mudar o título. Vai ser um salto quadrado. Em seguida, vincule o arquivo CSS. Vamos especificar aqui o estilo SS. Ok, por fim, vamos executar o projeto no navegador usando o servidor ativo Em seguida, coloque o editor e o navegador lado a lado, assim. Tudo bem, primeiro vou criar a marcação H DML. Vamos abrir a etiqueta profunda que será o contêiner. Em seguida, vou abrir outro puxão profundo que envolverá toda a animação Vai ser um invólucro Dentro do invólucro, teremos alguns elementos diferentes O primeiro será o ruber. Então teremos dois palitos. Vamos usar o manípulo de classes e o manípulo esquerdo. Em seguida, duplique esse código e mude da esquerda para a direita. Finalmente, vamos criar outro puxão profundo que será o quadrado Tudo bem, digamos sobre a marcação do H mal. Vamos seguir em frente e começar a escrever CSS. Em primeiro lugar, vou criar alguns estilos predefinidos e predefinidos para cada elemento. Vamos selecioná-los usando um asterisco. Vou me livrar da margem e do preenchimento padrão. Vamos definir as duas propriedades como zero. Além disso, vou definir o tamanho da caixa para a caixa de borda. Ao longo deste projeto, usaremos a RAM como uma unidade de medida. No momento, uma RAM é igual a 16 pixels. Por padrão, eu quero converter uma RAM em dez pixels. Que temos que diminuir o tamanho do telefone do elemento HTML, e temos que torná-lo em 62,5%. Tudo bem, em seguida, quero cuidar do contêiner Vamos definir que está dentro da altura. A largura será de 100%. Quanto à altura, vou torná-la 100% da janela de visualização Isso é sobre o contêiner agora. Em seguida, vou personalizar o invólucro. Primeiro de tudo, vamos definir largura e altura. A largura será de 100 Ram. Quanto à altura, vou fazer com que seja 80 Ram. Eu também mudo a cor de fundo. Vamos fazer 15 em 5. Na verdade, o invólucro será colocado no centro da página Para isso, vou usar a grade CSS. Vamos atribuir à grade de exibição do contêiner e colocar os itens no centro. Ok, vamos seguir em frente e continuar personalizando o invólucro. Em seguida, vou torná-lo um pouco arredondado. Vamos usar o raio da borda com valor cinco Ram e também criar algum efeito de sombra Vamos colocar duas Ram, duas Ram, seis Ram e, como cor, vou usar 888 Tudo bem, então vamos sentar sobre a embalagem. Vamos seguir em frente e começar a trabalhar nos bastões. Vamos selecioná-los usando um nome de classe comum. Primeiro de tudo, vamos definir dentro da altura. A largura será de três Ram, depois a altura será de 40 Ram. E também altere a cor de fundo. Vou usar aqui uma cor chamada coral. Aqui temos os dois bastões. Vamos fazer com que seus principais sites sejam ligeiramente arredondados. Use o raio da borda com os valores, uma RAM, uma RAM, esses são os principais sites E então precisamos de 0,0. Depois disso, vou cuidar das posições que precisamos para tornar suas posições absolutas. Na verdade, precisaremos de posição absoluta para cada elemento que seja. Filhos da embalagem. Então, vou selecionar cada desenvolvimento dentro do invólucro e, em seguida, definir sua posição como absoluta Vamos posicionar os elementos de acordo com o invólucro. Vamos atribuir a ele posição ou relativa. Ok, depois disso, vamos cuidar das posições dos bastões. Ambos terão o zero inferior. Em seguida, vou definir as posições dos manípulos separadamente. Vamos selecionar o manípulo esquerdo e definir a posição esquerda para 15 Ram. Vamos duplicar esse código, mudar da esquerda para a direita. Também precisamos aqui, com o mesmo valor. Ok, além disso, vou adicionar um pequeno efeito de sombra aos dois bastões. Vamos começar com o manípulo esquerdo. Os valores serão 0,2 M, 0,5 Ram e a cor 555 Quanto ao manípulo direito, precisaremos de um efeito de sombra semelhante, mas o primeiro valor será negativo. Ok, isso é tudo sobre os bastões. Em seguida, vamos tirar a borracha. Vamos definir com altura. A largura será de 67 Ram. Quanto à altura, será de 50 Ram. Além disso, vou usar uma cor de fundo temporária. Digamos vermelho. Ok, a seguir, vamos ver aqui a posição do ruber Vamos definir a posição esquerda. Serão 16,5 Ram na parte inferior. Serão 24 Ram. Além disso, vou adicionar borda na parte inferior e também uma sombra. A borda inferior será de um Ram sólido. E a cor será Coral como a sombra de caixa que precisamos aqui. 01 RAM zero. E a cor será DD. Tudo bem, vamos ver a borracha. Em seguida, vou cuidar da praça. Vamos selecioná-lo e definir a largura. Serão 14 Ram. Precisamos da mesma altura. Vou usar aqui uma propriedade chamada proporção com o valor um. Então vamos mudar a cor de fundo, torná-la branca. Além disso, vou fazer o quadrado arredondado usando o raio de borda de dois Ram Tudo bem, em seguida, vamos mudar a posição do quadrado. Vamos definir a posição esquerda, torná-la 44 Ram. Além disso, vou adicionar um pouco de sombra ao quadrado. Vamos inserir 0,02 Ram e a cor 555. Ok, está tudo pronto para começar a trabalhar nas animações. Vamos começar com a borracha. Ao longo da animação, alteraremos o raio da borda e também desceremos a própria borracha Vamos criar CSSKeyframes com Teremos algumas etapas diferentes em 0% e 20%. Mudaremos a borda, mas não moveremos a borracha Precisamos dessas duas etapas aqui. O raio da borda será zero. Então, precisamos nos transformar. Traduza com direção y e com valor zero. Em seguida, teremos 50,60% . Nessas etapas, alteraremos o raio da borda e moveremos a O raio da fronteira será 0035 Ram e 35 Ram. Novamente, quanto à transformação, traduza Y, será 23 Ram. Finalmente, as duas últimas etapas serão 65% e 100%. Aqui, alteraremos o raio da borda e moveremos o elemento para seu local padrão O raio da borda será zero. Quanto à transformação translada Y, ela também será zero. Ok, então os quadros-chave estão prontos e podemos executar a animação. Precisamos do nome da animação ruber anim. Então, a duração será de 2 segundos. Além disso, precisamos que a animação seja infinita, então ela será linear. Como você pode ver, o ruber está se movendo e a animação funciona bem Podemos nos livrar dessa mudança temporária de cor a partir daqui. Tudo bem, em seguida, temos que criar a animação para o quadrado. Devemos combinar o movimento do quadrado e da borracha. Vamos criar novos quadros-chave e chamá-los de quadrado anim. De 0% a 20%, devemos mover o quadrado um pouco para baixo em 0%. Precisamos transformar a tradução y com o valor de cinco quadros. Então, de 20% a 50% temos que mover o quadrado para baixo novamente. O valor será de 40 Ram. Nesse caso, alteramos a velocidade. Então, a 50,60%, moveremos o elemento para baixo, mas com uma velocidade diferente, o valor será 64,5 Em seguida, vêm 62%, onde temos que subir de forma quadrada. O valor será 45 Ram. Depois disso, teremos 80% ou teremos que mover o elemento para cima. E também rotacionado, o valor será dez. Também precisamos adicionar aqui girar Z 90 graus. Finalmente, a 100%, precisamos nos mover novamente, levantar o elemento e girar. O valor será cinco Ram. Tudo bem, vamos falar sobre a animação quadrada. Vamos em frente e executá-lo. Precisamos ouvir o nome quadrado Anim, depois a duração de 2 segundos, depois infinito e linear novamente. Como você pode ver, estava tudo bem. E a única coisa que precisamos fazer é criar as animações para os bastões Eles devem se inclinar quando o quadrado atingir a borracha. Vamos criar os quadros-chave para o controle esquerdo. Vou chamá-lo de manípulo esquerdo de anim. Durante a animação, devemos girar o stick de acordo com o eixo z. Com 0,30%, ainda não rotacionaremos o elemento. Precisamos transformar a rotação com valor zero. Então, a 50,65%, giraremos levemente o manípulo. O valor será de dois graus. Finalmente, em 80,100%, giraremos o manípulo de volta à sua posição padrão O valor será zero. Tudo bem, então está tudo pronto. Vamos executar a animação aqui. O nome deixou Stick animal. A duração será de 2 segundos. Então, novamente, precisamos de infinito e linear. Como você pode ver, o manípulo está girando. Mas não é disso que precisamos aqui. Ele está girando do centro porque a origem da transformação está definida como central por padrão, precisamos alterá-la A origem será no centro inferior. Tudo bem, como você pode ver agora está tudo bem. Vamos também executar a animação para o manípulo direito. Vou copiar esse código e colá-lo abaixo. Vamos mudar o nome que precisamos, right stick anim. Além disso, precisamos alterar o valor da função Z de rotação Deve ser menos dois graus. Vamos copiar a propriedade da animação e alterar o nome. Tudo bem, como posso ver, tudo funciona perfeitamente. A única coisa que eu quero fazer é atribuir ao cabeçalho de transbordamento do invólucro porque os bastões estão se movendo ligeiramente para fora do rapper Tudo bem, é isso. Finalmente, com este projeto terminamos e espero que tenham gostado. Te vejo na próxima vez. 5. Projeto 2 - landing page: Neste vídeo, criaremos uma landing page animada com HTML e CSS. Vamos dar uma olhada no projeto finalizado. Se recarregarmos a página , você verá a imagem de fundo em tela cheia com uma boa animação Depois de exibido, ele muda de forma então o projeto vai ser pequeno, mas espero que seja interessante e que você goste. Tudo bem, vamos começar. Eu criei uma nova pasta na área de trabalho chamada Lending Page Animation, na qual tenho outra pasta para as imagens Vamos abrir essa pasta. E o código VS então cria nossos arquivos de trabalho para HTML e CSS. Precisamos de HTML de índice e styleTss. Em seguida, abra o arquivo HTML com pontos de índice e crie um documento HTML básico. Para isso, temos que colocar aqui um ponto de exclamação e pressionar Tab ou Enter Tudo bem, primeiro de tudo eu vou mudar o título. Será uma animação da página de destino. Em seguida, vamos vincular o arquivo CSS. Vou abrir a tag do link. E então temos que definir o caminho do arquivo. Ok, finalmente, vamos seguir em frente e executar o projeto no navegador com um servidor ativo. Em seguida, coloque o editor e o navegador como. Então, estamos prontos para começar. Primeiro de tudo, vou criar uma marcação HTML. Vamos abrir a tag com um contêiner de classe. Teremos dois elementos diferentes dentro do contêiner. A primeira será a aterrissagem. Quanto ao segundo, vou chamá-lo de PG. Tudo bem, digamos sobre a marcação HTML. Vamos começar a escrever um pouco de CSS. Em primeiro lugar, vou criar alguns estilos padrão e redefinir. Vou selecionar cada elemento usando um asterisco. E então vou me livrar da margem e do preenchimento padrão Vamos definir as duas propriedades como zero. Depois disso, vou cuidar do contêiner. Vamos selecioná-lo e definir que está dentro da altura. A largura será de 100%. Quanto à altura, vou torná-la 100% da parte da vista. Altere também a cor do plano de fundo. Vou usar o valor RGB 184-16-5119 Tudo bem, aqui temos Vamos sentar ao redor do contêiner, seguir em frente e cuidar da aterrissagem. Vamos selecionar esses elementos. Primeiro de tudo, vamos definir com altura. Vou definir as duas propriedades para 100%. Em seguida, vamos definir o plano de fundo. Primeiro de tudo, vou usar a função de gradiente linear. Vou passar aqui dois valores RGBA. Ambas serão pretas com opacidade 0,8. Então eu vou definir o caminho da imagem Precisamos do URL, depois das imagens do nome da pasta e temos que selecionar PG. Pg também. Vamos aderir sem repetir. Além disso, vou definir o tamanho do plano de fundo. Vai ser coberto. Então, aqui temos o pouso com uma imagem de fundo em tela cheia. Vamos seguir em frente e cuidar do segundo elemento, que é um PG. Este elemento cobrirá o pouso. Depois de dominarmos a página, ela desaparecerá e a aterrissagem será exibida. Primeiro de tudo, vamos definir dentro da altura. Vou fazer os dois 100% e depois mudar a cor do fundo. Vou usar aqui o mesmo valor RGB que usamos para o contêiner Ok, então aqui temos o plano de fundo, mas agora ele está colocado abaixo do patamar e, como eu disse, precisamos colocá-lo no topo do patamar. Para isso, vou usar posições e a propriedade do índice z. Em primeiro lugar, vou definir a posição como absoluta. Em seguida, vamos definir as propriedades superior e esquerda. Eu vou fazer com que os dois sejam zero. Então, precisamos de uma propriedade de índice com algum valor maior que zero. Digamos que dez. Tudo bem, como você pode ver, o fundo cobre o pouso e agora é hora de criar a animação que precisamos para desaparecer do fundo. Depois de recarregar a página, vamos criar quadros CSS Vou chamá-lo de BG anim. No geral, teremos três etapas diferentes. Vou diminuir a escala do elemento, mas de acordo com o eixo y em 0,50%, a escala será uma Então, precisamos transformar a escala y com o valor um. E então, de 50% a 100% diminuirá a escala para zero. Em 100%, precisamos transformar a escala Y zero, os quadros-chave já. E agora temos que aplicar esses ladrilhos ao elemento. Precisamos de propriedades de animação. Então, primeiro, temos que definir o nome da animação. Vai ser G qualquer, então precisamos de duração de 2 segundos. Como você pode ver, os elementos estão animados. Mas temos aqui dois problemas. O elemento está desaparecendo no centro da página. Isso acontece porque, por padrão, a origem da transformação é central e precisamos alterá-la para a segunda edição. Quando o elemento desaparece, ele é exibido novamente. Primeiro, precisamos manter a escala como zero. Vamos mudar a origem da transformação. Precisamos chegar ao topo. Agora, um problema foi resolvido. Quanto ao segundo problema, precisamos adicionar ao valor da propriedade de animação chamado forwards Ele mantém todos os estilos definidos na última etapa da animação. Agora, como você pode ver, tudo funciona bem. Agora precisamos cuidar da segunda animação. Precisamos mudar a forma da aterrissagem. Vou fazer isso usando uma das propriedades CSS chamada Clip Path. Na verdade, eu posso recomendar um dos sites. Vamos pesquisar o Clip Path onde você pode brincar com diferentes formas. Você pode obter o código CSS adequado aqui. No nosso caso, temos uma forma com sete pontos diferentes. Para transformar uma forma em outra com um efeito de transição , as duas formas devem ter o mesmo número de pontos. Eu tenho todos os valores preparados. Na verdade, você pode brincar com diferentes formas e valores. Depende de você. Vou criar quadros SK com o nome em geral. Teremos três etapas diferentes em 0,50% que terão a mesma forma Vamos usar o caminho do clipe com a função de polígono. Vou passar aqui os seguintes valores. O primeiro poli será 50% zero, depois teremos 70% zero O próximo será 100% zero. Então 100% duas vezes zero, 100% então teremos zero duas vezes 30% e zero. Quanto aos 100%, temos que alterar esses valores. Precisamos de um polígono de traçado de recorte. O primeiro ponto será 50% 4% Então teremos 70% 10% depois 95,0 95, 87% depois 5% e 105% 15% O último ponto será 31% 10% Tudo bem, os quadros-chave já estão os Vamos executar a animação. Vamos definir o nome dos quadros-chave que emprestam qualquer duração 4 segundos, como no caso anterior, que precisamos daqui para frente Se recarregarmos a página, o elemento mudará sua forma suavemente Na verdade, eu quero acrescentar aqui mais uma coisa. Se dermos uma olhada no projeto finalizado , veremos que a imagem de fundo está se movendo suavemente. Vamos adicionar esse efeito também. Precisamos definir a posição de fundo. Por padrão, ele será o topo central. Então, precisamos mudar isso. Na animação, precisamos do centro da parte inferior. Tudo bem, agora tudo funciona perfeitamente, e com o projeto, terminamos. Te vejo na próxima vez. 6. Projeto 3 - Animação de bola: Neste vídeo, vamos criar um projeto de animação CSS. O projeto será pequeno, mas acho que será interessante e você aprenderá algumas coisas novas sobre animações CSS Vamos continuar descrevendo o projeto. Temos aqui uma bola animada que está se movendo para cima e para baixo. Está atingindo os quadrados que vêm dos lados esquerdo e direito Além disso, temos aqui um fundo em movimento que cria a ilusão de que a bola se move para cima Ok, vamos falar sobre esse projeto. Vamos começar a criá-lo. Eu tenho uma nova pasta na área de trabalho chamada Ball animation, na qual tenho outra pasta para a imagem de fundo. Vamos abrir essa pasta no código VS e criar nossos arquivos de trabalho. Teremos apenas dois arquivos, CSS de estilo HTML de índice. Vamos abrir o arquivo HTML de índice e criar um documento HTML básico. Vou usar um ponto de exclamação e, em seguida, temos que pressionar Top ou Enter Primeiro de tudo, vamos mudar o título. Vou inserir sua animação de bola. Depois disso, vou vincular os arquivos CSS, abrir a tag de link e inserir um CSS Ok, finalmente, vamos seguir em frente e executar o projeto no navegador. Para isso, vou usar um dos pacotes de código do VS chamado Live Server. Antes de começarmos a escrever o código, vou colocar o editor e o navegador lado a lado. Então, primeiro vou criar uma marcação HTML. Vamos abrir a tag com o invólucro da classe. Ele incluirá todo o conteúdo dentro do invólucro com três elementos profundos diferentes Os dois primeiros elementos profundos serão para os quadrados. Quanto ao terceiro elemento profundo , será a bola. É uma tag profunda aberta com o bloco de classes , será o nome comum da classe. Mas, além disso, precisamos de uma aula individual, digamos, bloco um. Vamos duplicar essa linha de código e alterar o nome da classe Precisamos do bloco dois. Está bem? Vamos abrir outra etiqueta profunda com a bola da classe. Tudo bem, vamos falar sobre a marcação HTML. No momento, nada está visível aqui porque todos os elementos estão vazios. Agora é hora de começar a escrever CSS. Primeiro, vamos criar alguns estilos padrão e comuns para cada elemento. Vamos selecionar um Aster Risk. Vou me livrar da inadimplência, da margem e do preenchimento. Vamos definir as duas propriedades como zero. Além disso, vou definir o tamanho da caixa como caixa de borda novamente, digamos, sobre os estilos padrão em todo este projeto Vamos usar Ram como unidade de medida. Por padrão, um m é igual a 16 pixels. Eu quero que tenha dez pixels. Para isso, precisamos diminuir o tamanho padrão do elemento HTML. Precisamos configurá-lo para 62,5%. Ok. Depois disso, vamos seguir em frente e estilizar os elementos do corpo. Vou definir largura e altura. Vamos definir com 200% Quanto à altura, vou torná-la 100% da janela de visualização Vamos configurá-lo em 200 VH. Em seguida, vou cuidar da embalagem. Vamos selecionar esse elemento e definir, vou definir com 270. Ok, eu vou fazer a embalagem quadrada. Para isso, usarei uma das propriedades CSS chamada proporção. Se eu configurá-lo como um , isso significará que o invólucro terá uma altura igual a 70 M. Mas se eu mudar a largura, digamos, para ATM, a altura também será ATM Eu acho que essa propriedade é muito conveniente. Vamos definir o plano de fundo. Vamos definir o URL da imagem de fundo e precisamos do caminho da imagem. Temos uma pasta chamada imagens e temos que selecionar Gng. Como você pode ver aqui, temos o plano de fundo agora, é isso sobre o invólucro Antes de prosseguirmos, eu só quero colocar a embalagem no centro da página Para isso, vamos usar a grade CSS. Vou definir Display como grade. E então, para colocar o elemento no centro, precisamos colocar os itens no centro. Está bem? Então, como você pode ver, o elemento está perfeitamente posicionado no centro. Vamos seguir em frente. Resposta: para trabalhar nas caixas, quero dizer aqueles quadrados que aparecem dos lados esquerdo e direito, como você sabe, eles têm um bloco de classes comum Vamos selecioná-lo e definir a largura. Eu vou definir com até 18 Ram. Eu quero que esses elementos sejam quadrados. Vamos usar novamente a proporção com valor um e também alterar a cor do fundo. Vou usar seu valor RGB. 501-18-4184, OK. Temos aqui as praças. Vamos definir as posições. Vou definir a posição como absoluta. Então, para posicionar o elemento de acordo com o invólucro, vamos definir a posição como um relativo Depois disso, vou definir as posições dos quadrados separadamente. Vamos selecionar o bloco um e definir as propriedades superior e direita. Vou definir a primeira posição para 16 Ram. Quanto à posição correta , será 44 Ram. Então eu vou duplicar esse código. Vamos mudar o nome rápido. Precisamos do bloco dois. A posição superior será a mesma da posição correta. Vou configurá-lo para oito Ram. Tudo bem, como você pode ver, os elementos estão posicionados corretamente. Agora é hora de cuidar da bola. Vamos selecioná-lo. Em primeiro lugar, vou definir a largura. Vamos configurá-lo para 12 Ram. Precisamos da mesma altura para a bola. Vou usar novamente a propriedade chamada proporção com o valor um. E então vamos mudar a cor de fundo. Vamos usar RGB, 255-11-8118 Ok, vamos fazer isso arredondado usando o raio da borda com o valor 50% Então vamos Vou definir a posição como absoluta. Em seguida, vou definir as propriedades do topo esquerdo. A posição esquerda será 29 Ram. Quanto à primeira posição , serão 22 rampas. Tudo bem, isso é tudo sobre a bola. Agora podemos começar a parte engraçada. Quero dizer, as animações. Vamos começar com os quadrados. Vamos dar uma olhada no projeto finalizado. Como você pode ver, os elementos vêm do topo em ordem. Primeiro, o quadrado esquerdo desce e depois o direito. Além disso, a opacidade dos quadrados está mudando durante Ok, vamos criar os quadros-chave CSS nos quais temos que definir as regras CSS que serão aplicadas aos quadrados durante a animação Os quadros-chave consistirão em etapas diferentes. Vou chamá-lo de bloco de um m de 0% a 30% Quero dizer, na parte inicial da animação, o quadrado deve se mover de cima para baixo E também temos que alterar sua opacidade em 0%. Vou usar transform com a função translate y como o valor que vou usar aqui, -38 Além disso, temos que definir aqui a função com zero grau. Como eu disse, precisamos que a opacidade seja 0,5. Tudo bem, 30% o elemento se move para baixo em sua posição padrão, ainda sem rotação Transformamos, traduzimos Y com zero e novamente giramos z com zero Novamente, a próxima etapa será de 40%. Nesta etapa, quadrado permanecerá em sua posição, mas girará E também aumentaremos a opacidade em 40%. Precisamos transformar a tradução de Y com zero, com o valor de -180 Também precisamos aumentar a opacidade. Vamos fazer com que seja de 40% para a próxima etapa, seja, para 45%, precisamos das mesmas células porque durante esse tempo a bola deve ficar no quadrado e devemos esperar por ela. Vamos colocar aqui e depois adicionar aqui 45%. Tudo bem, depois disso, o quadrado deve se mover para baixo e desaparecer. A próxima etapa será de 55%. Nesta etapa, precisamos transformar a tradução Y com o valor 38 Ram Além disso, precisamos da rotação. Eu giro C -180 graus. Também precisamos diminuir a opacidade. Vamos configurá-lo para 2,5 Ok, precisamos que esse quadrado permaneça nessa posição. Ao final da animação, precisamos dos mesmos estilos de 55% a 100%. Vamos adicionar aqui 100%. Tudo bem, na verdade, a animação está pronta Vamos executá-lo no primeiro quadrado, precisamos da propriedade de animação e , em seguida, temos que definir o nome da animação. Quero dizer, arranca um. O próximo valor será a duração de 5 segundos. Em seguida, precisamos executar a animação infinitamente. Então, temos que inserir infinito. Eu vou fazer a animação linear. Como você pode ver, a animação está sendo executada. Mas, na verdade, não é isso que queremos agora. O elemento está girando de acordo com o centro, porque, por padrão, a origem da transformação é definida como central No nosso caso, precisamos colocá-lo no canto inferior direito. Vamos usar a origem da transformação e colocá-la no canto inferior direito. Agora, como você pode ver, o quadrado se move corretamente. Uma vez que ele se afasta do fundo, precisamos que ele fique oculto. Para isso, podemos atribuir um estouro oculto ao invólucro. Então, isso é sentar ao redor do primeiro quadrado. Também precisamos do mesmo para o segundo. Na verdade, vou duplicar todos os quadros-chave. Vamos mudar o nome que precisamos bloquear para qualquer outro. Precisamos nos livrar dos sinais de menos a partir daqui, porque precisamos girar o segundo quadrado na direção oposta Além disso, temos que mudar a origem da transformação. Nesse caso, precisamos do canto inferior esquerdo. Por fim, vamos definir a propriedade de animação. Precisamos mudar aqui o nome da animação. Além disso, será um bloco para qualquer um, precisamos aqui de um tempo de atraso para o segundo quadrado. Vamos fazer 2,5 segundos, na verdade, essa não é a versão final dessa animação. Faremos aqui uma pequena alteração quando cuidarmos da animação da bola. Vamos continuar e começar a trabalhar nisso. Vamos dar uma olhada no projeto finalizado. Como você pode ver, a bola está se movendo para cima e para baixo e também muda ligeiramente de forma. Vamos criar CSS, quadros-chave para a bola. Vou chamar isso de final de bola. Na animação da bola, teremos cinco etapas diferentes de 0% a 45%. A bola se moverá para cima e encolherá um pouco em 0%. Vou usar transformar, traduzir Y com o valor -20 Ram Além disso, para reduzir um pouco os elementos, vou usar a função de escala Precisamos que você passe 0,8 como o valor da direção x, como parte da direção y, será um. Então, de 45% para a próxima etapa, a bola deve se mover para baixo. E também devemos mudar a escala em 45%. Precisamos transformar, traduzir Y com o valor zero. Também precisamos mudar a escala. Vai ser 0,9 e um. A próxima etapa será de 50%. Nessa etapa, a bola deve se mover para baixo. E também temos que encolher a bola, mas neste caso verticalmente em 50% precisamos transformar, traduzir y com valor dois A escala será de um e 0,7. Depois disso, teremos que mover a bola para cima e encolhê-la horizontalmente em 60%. Vou usar transform translate Y com o valor menos Quanto à escala, será o ponto 9.1 Tudo bem, depois disso, precisamos da última etapa Temos que mover a bola para cima e também encolher horizontalmente em 100%. Precisamos transformar, traduzir Y com o valor Quanto à escala, será o ponto 8.1 Ok, os quadros-chave estão prontos. Vamos seguir em frente e aplicar essas regras ao elemento. Vamos usar a propriedade de animação. Precisamos aqui do nome da bola de animação. De qualquer forma, a duração será de 2,5 segundos. Além disso, a animação deve ser executada infinitamente e será linear Como você pode ver, a bola está animada, mas não atinge os quadrados Precisamos igualar os horários aqui. Vou adicionar um pouco de atraso à animação. Vai ser 0,9 segundo. Agora, como você pode ver, a bola toca os quadrados À primeira vista, tudo funciona bem. Mas se recarregarmos a página, a bola e o quadrado direito aparecerão como em uma condição de postagem, o que não parece bom Precisamos tornar toda a animação dinâmica, não importa se recarregamos a página ou não Para fazer isso, podemos manipular o tempo de atraso. Em geral, se usarmos os valores negativos , a propriedade de atraso da animação acelerará a animação. Vamos dar uma olhada no projeto finalizado. Se recarregarmos a página, você verá o quadrado direito se afastando do fundo e também a bola subindo de uma posição difícil Precisamos alterar os tempos de atraso do segundo quadrado. Serão -2,5 segundos. Agora, se recarregarmos a página , veremos o quadrado direito se afastando do invólucro Quanto à bola, se adicionarmos aqui o sinal de menos, a bola ficará animada quando abrirmos a página Mas agora, como você pode ver, ele não atinge os quadrados Vou aumentar o tempo de atraso. Vamos configurá-lo para 1,5 segundo. Tudo bem, então é isso em relação às animações da bola e dos quadrados Agora temos que cuidar do plano de fundo. Antes de começarmos a trabalhar na animação, adicionarei alguns estilos de plano de fundo ao invólucro Precisamos definir o tamanho do plano de fundo. Essa propriedade terá dois valores. A largura do plano de fundo será automática. Quanto à altura, vou ajustá-la para 70 m e, para deixar claro, vou adicionar uma borda ao invólucro Vamos fazer com que seja um Ram, sólido e vermelho. Além disso, vou definir a repetição em segundo plano com valor sem repetição. Agora, se eu alterar os valores do tamanho do plano de fundo, digamos para 50 Ram e 60 Ram, você verá que a largura e altura do fundo foram alteradas. É assim que a propriedade do tamanho do plano de fundo funciona. Vamos voltar aqui. 0,70 Ram. Usamos aqui porque mantemos a qualidade da imagem, ela não encolhe Agora precisamos animar o plano de fundo durante a animação Precisamos mover todo o plano de fundo para baixo. E eu vou fazer isso usando a propriedade chamada posição de fundo. Primeiro de tudo, vamos criar quadros-chave com o nome BG em 0%. Vou definir a posição de fundo como centro e zero. Quanto aos 100%, a posição de fundo já estará no centro e 70 ao redor dos quadros-chave. Vamos aplicar essas regras ao invólucro. Use a propriedade de animação com o nome de fundo Anim. Então, a duração será de 5 segundos. Também precisamos aqui de infinito e linear. Agora, como você pode ver, o fundo está se movendo para baixo. Uma vez que ele se move, ele desaparece. E não precisamos disso, precisamos repetir o plano de fundo, mas nesse caso, acordo com o eixo y, a propriedade de repetição do plano de fundo será repetir Y. Agora, como você pode ver, tudo funciona perfeitamente Vamos nos livrar dessa fronteira a partir daqui. Além disso, quero acrescentar uma coisinha aos quadrados. Vamos adicionar a eles um pequeno efeito de sombra. Vamos usar box shadow com os valores 0,2 0,2 m e, em seguida, 0,4 como cor. Eu vou usar AA. Na verdade, a sombra estará dentro do elemento que precisamos aqui em St Eu quero a sombra em todo o quadrado. Precisamos aqui também de outros valores. -0,2 Ram, -0,2 Ram, 0,4 Ram, depois a cor AA e novamente inserida. Ok, finalmente com este projeto, terminamos. Espero que tenha sido interessante e que você tenha gostado. Te vejo na próxima vez. 7. Projeto 4 - Terra animada: Neste vídeo, vamos criar uma Terra animada, que você vê aqui na página. Construiremos esse projeto usando HTML e CSS puros. Como você pode ver, temos aqui duas partes diferentes. Do lado esquerdo, temos a parte escura da Terra. No lado direito, há uma parte clara da Terra. A própria Terra está girando de acordo com seu eixo Y. Tudo bem, vamos ver esse projeto. Vamos começar. Eu criei uma nova pasta na área de trabalho chamada Animated Earth, na qual temos outra pasta para as imagens. Vamos abrir essa pasta no código VS e, em seguida, criar nossos arquivos de trabalho para HTML e CSS. Ok, vamos abrir o arquivo HTML indexado e criar um documento HTML básico Para isso, temos que colocar aqui um ponto de exclamação e depois pressionar Top ou Enter . Aqui vamos nós. Em primeiro lugar, vou mudar o título. Vai ser uma Terra animada. Em seguida, vamos vincular o arquivo CSS, abrir a tag de link e especificar o nome do arquivo. Tudo bem, vamos prosseguir e executar o projeto no navegador usando o servidor ativo. Em seguida, coloque o editor e o navegador lado a lado. Estamos prontos para começar a escrever o código. Primeiro, vou criar a marcação HTML. Vamos abrir uma tag p com um invólucro de classe. Dentro da embalagem, teremos dois elementos diferentes, quero dizer, a parte e a parte noturna Vamos abrir uma abordagem profunda com as classes Earth e, em seguida, duplicar essa linha de código e alterar o nome da classe de que precisamos Tudo bem, vamos ver a marcação HDML. Vamos continuar e responder para escrever um pouco de CSS. Em primeiro lugar, vou criar alguns estilos de redefinição para cada elemento. Vamos selecionar o asterisco e eliminar a margem e o preenchimento padrão de cada elemento Vou definir as duas propriedades como zero ao longo deste projeto. Vou usar Ram como unidade de medida. No momento, uma RAM é igual a 16 pixels, e eu quero torná-la igual a dez Para isso, temos que diminuir o tamanho da fonte dos elementos HTML. Vamos fazer com que sejam 62,5% Tudo bem, vamos personalizar os elementos do corpo Vou definir com altura. A largura será de 100%. Quanto à altura, vou torná-la 100% da janela de visualização Agora é hora de cuidar da embalagem. Vamos selecionar esses elementos. Antes de tudo, defina sua largura. Vou configurá-lo para o bonde. Eu quero a mesma altura para o invólucro, caixa eletrônico. Para isso, podemos usar uma das propriedades do CS chamada proporção. Se configurarmos como um, isso significará que a altura da embalagem será de bonde Mas se mudarmos a largura, a altura será alterada de acordo. OK. Em seguida, vou definir a cor de fundo. Vamos usar um plano de fundo temporário. Vou usar o BB e também tornar o elemento arredondado usando o raio da borda de 50%, ok? Depois disso, vou colocar a embalagem perfeitamente no centro E eu vou fazer isso usando posições. Precisamos de uma posição absoluta. Em seguida, temos que definir as propriedades superior e esquerda. Vou definir as duas posições para 50%. Então, para colocar o elemento no centro perfeitamente, precisamos usar a transformação com a função de tradução. E temos que passar aqui -50% para as direções x e y. Ok, então é isso. Em relação ao invólucro, ele é colocado no centro. Agora eu vou cuidar da Terra. Como você sabe, temos dois elementos diferentes, quero dizer, as partes diurna e noturna. Vamos selecionar os dois elementos usando o nome comum da classe. Em primeiro lugar, vou definir a largura. Vamos fazer com que seja 100%. Quanto à altura, vou usar novamente a propriedade chamada proporção com o valor um. Em seguida, defina a posição como absoluta. Também torne o elemento arredondado usando o raio da borda 50% Agora, os dois elementos são colocados um em cima do outro nesse círculo Agora podemos definir os planos de fundo para ambas as partes. Vamos selecionar o primeiro, definir a imagem de fundo. Vamos definir o caminho da imagem. Temos a pasta chamada imagens e temos que selecionar Terra, JPG. Aqui temos a imagem de fundo. Essa é a parte leve. Vamos continuar e fazer o mesmo com a peça também. Na verdade, vou duplicar esse código. Vamos mudar o nome da classe que precisamos aqui. E também altere o nome da imagem que precisamos. Agora vemos aqui a imagem de fundo da peça. Isso acontece porque os dois elementos têm posição absoluta e a parte diurna acabou ficando atrás da noite. A próxima coisa que vamos fazer é cortar a metade da noite. Para fazer isso, vou usar uma das propriedades CSS chamada clip path. Vou inserir aqui os valores e depois vou te mostrar onde você pode encontrar as informações sobre essa propriedade. Precisamos de polígono, os valores serão os seguintes. Precisamos de zero duas vezes, depois 50% zero, depois 50% 100% e depois 0,100% Como você pode ver, a metade é cortada Vamos pesquisar o Clip Path no Google. Este é o site onde você pode brincar com diferentes formas. Depois de obter a forma necessária, você pode simplesmente pegar o código CSS adequado aqui e usá-lo em seu projeto. Este é um site muito útil e você pode visitá-lo. Ok, vamos começar a trabalhar na animação. Vou criar quadros-chave CSS com o nome Earth. De qualquer forma, vamos manipular as posições de fundo. Teremos apenas duas etapas, de 0% a 100%. Mudaremos a posição do fundo exatamente na mesma distância que a imagem tem em relação à largura. Em 0%, a posição de fundo será zero e central. Então, a 100%, a posição de fundo será 192 m, é a largura da imagem e depois o centro Tudo bem, vamos aplicar esses ladrilhos aos elementos. Ambas as partes terão a mesma animação. Precisamos aqui do nome da animação seguido pela duração, que será de 25 segundos. Então eu quero que a animação seja executada infinitamente. Precisamos de infinito, e também a animação será linear, ok? Então, como você pode ver, a animação funciona perfeitamente e temos um bom efeito diurno e noturno. Antes de terminarmos este vídeo, vou adicionar algumas sombras à terra Para isso, vou usar o pseudo elemento anterior. Vamos selecionar o invólucro antes do elemento. Na verdade, vou dar a esse elemento exatamente a mesma forma que o invólucro tem Vamos definir o conteúdo. Vai ficar vazio. Então eu vou definir a posição como absoluta. Além disso, vou definir as alturas Vamos fazer as duas 100% e depois usar uma cor de fundo temporária, BB. Como você pode ver, o elemento acabou por trás da embalagem Não precisamos disso, temos que colocá-lo na frente da Terra Para isso, vou usar a propriedade do índice Z e também tornar o elemento arredondado. A propriedade do índice z será dez. Precisamos aqui de um valor maior que zero. Quanto ao raio da borda, vou configurá-lo para 50%. Tudo bem, vamos nos livrar desse fundo a partir daqui Além disso, também vou me livrar do plano de fundo da embalagem Teremos algumas sombras diferentes, uma delas ao redor da Terra Além disso, teremos duas sombras diferentes para as partes diurna e noturna Vamos usar box shadow com os valores menos um Ram, menos um Ram, dois Ram e a cor quatro Então precisamos de uma RAM, duas vezes duas RAM e da mesma cor. Agora temos a sombra ao redor da Terra. Quanto às sombras dentro do elemento, vamos inserir aqui. Insira dez M05 Ram e a cor preta. Em seguida, precisamos inserir novamente menos 1m02m como cor. Vou usar o 933. Tudo bem, então é isso. Finalmente, o projeto está concluído. Espero que tenha sido interessante e que você tenha gostado. Te vejo na próxima vez. 8. Projeto 5 - Flor: Neste vídeo, vamos criar a flor com HTML e CSS puros. Aqui temos a versão final do projeto, onde você pode ver uma flor normal com algumas pétalas e um caule Ok, vamos começar a criar esse projeto. Eu preparei uma nova pasta na área de trabalho chamada flor, que agora está vazia. Vamos abrir essa pasta no código VS e criar nossos arquivos de trabalho para HTML e CSS. Em seguida, abra o arquivo HTML do índice e crie um documento HTML básico. Para isso, precisamos colocar aqui um ponto de exclamação e, em seguida, pressionar Top ou Enter Tudo bem, primeiro, vamos mudar o título. Vai ser flor, então eu vou vincular o arquivo CSS. Vamos abrir o link e especificar aqui o nome do arquivo CSS. Ok, finalmente, vou executar o projeto no navegador usando um servidor ativo. Além disso, vamos colocar o editor e o navegador lado a lado. Ok, vamos começar a criar uma marcação HDml. Vou abrir um puxão profundo com a flor da turma. Isso incluirá todo o conteúdo. Em seguida, precisamos de outro puxão profundo, que envolverá as pétalas e também o círculo que é colocado no meio da flor No geral, teremos 12 pétalas. Vamos criá-los. Além disso, precisamos do círculo. Vamos dar um puxão aberto e profundo com o círculo da turma. Além disso, precisamos de outro puxão profundo para fora das pétalas, que será um caule Tudo bem, vamos falar sobre a marcação H mel. Vamos seguir em frente e começar a escrever CSS. Em primeiro lugar, vou criar alguns estilos predefinidos e predefinidos para cada elemento. Vamos selecioná-los usando um asterisco. Em seguida, livre-se da margem e do preenchimento padrão. Vamos definir as duas propriedades como zero. Além disso, vou definir o tamanho da caixa para a caixa de borda. Ok, durante todo o projeto, vou usar a RAM como uma unidade de medida. Por padrão, um M é igual a 16 pixels e eu quero converter um M em dez Para isso, temos que diminuir o tamanho da falha do elemento HM. Temos que chegar a 62,5% Agora é hora de começar a personalizar a embalagem. Elemento Devo. Estou na flor, vamos definir a altura. Vou definir como 100%. Quanto à altura, será 100% da janela de visualização Também altere a cor de fundo. Vou usar aqui, valor RGB 236.232.226 Ok, isso é tudo sobre a flor por enquanto, vamos seguir em frente e Estou na embalagem, vamos definir com altura. Vou definir as duas propriedades para dois Ram. Além disso, vou usar aqui uma cor de fundo temporária. Digamos verde. Na verdade, vou colocar o elemento no centro. E para isso podemos usar os livros Flax da CS. Vamos usar display Flax e, em seguida, justificar o centro de conteúdo e um centro de itens de linha OK. Em seguida, vou selecionar a raquete Vamos definir sua altura interna. Vou definir os dois para 15 Rams. Vamos usar aqui uma cor de fundo temporária. Digamos amarelo. Depois disso, vou definir a posição das pétalas. Vamos configurá-lo como absoluto. Precisamos posicionar os elementos acordo com os elementos aparentes. Precisamos posicionar em relação às pétalas. Em seguida, vamos definir as propriedades superior e esquerda. Vou colocar os dois em cinco carneiros. Tudo bem, agora vemos aqui apenas uma pétala, mas todas as pétalas estão colocadas umas sobre as outras E é por isso que vemos aqui apenas um deles. Depois disso, quero mudar a forma das pétalas usando o raio da borda Vou fazer com que o elemento seja arredondado em todos os lados, exceto no canto inferior direito. Vamos definir o raio da borda para 50%, depois novamente 50%, depois zero, depois 50%. Tudo bem, depois disso, vou inclinar as pétalas de acordo com as duas as pétalas de acordo com as Quero dizer, distorção das transformações X e Y. Os valores serão 23 graus em ambas as direções. Como você pode ver, as pétalas estão inclinadas. Mas, além disso, precisaremos girá-los se usarmos aqui a função de rotação com, digamos, 30 graus Isso mudará a forma da pétala. E não precisamos disso. Não precisamos usar essas duas funções simultaneamente. Para evitar esse problema, vou usar um pseudo elemento anterior Criaremos pétalas com elemento anterior e as inclinaremos Quanto à função de rotação, vamos usá-la com elementos profundos Vamos selecionar a pétala com o elemento anterior. Em primeiro lugar, vamos definir o conteúdo para deixá-lo vazio. Em seguida, precisamos definir largura e altura. Vou definir ambas as propriedades para 100% da posição definida de Al absoluta e, em seguida, criar o plano de fundo. Use sua função de gradiente linear com duas cores diferentes, quero dizer F e F. Em seguida, vou pegar esses estilos daqui e atribuí-los ao anterior, ao elemento Além disso, vamos nos livrar dessas cores de fundo temporárias. Tudo bem. Depois disso, vou criar um pequeno efeito de sombra. Vamos usar box shadow com os valores de 0,3 m, três vezes, e depois a cor DD. Ok, então as pétalas são personalizadas e agora temos que girá-las Precisamos selecionar cada pétala separadamente e usar a função de rotação. Vamos seguir em frente e selecionar o primeiro. Na verdade, não precisamos girar a primeira pétala. Mas de qualquer forma, vou definir a função de rotação para isso O valor será zero. Vamos duplicar esse código. Vou girar a segunda pétala em 30 graus. Como você pode ver, a segunda pétala é girada, mas é girada a partir do centro Isso acontece porque, por padrão, a origem da transformação é definida como centralizada. E precisamos mudar, na verdade, precisamos trocá-lo pelo pedal em si e também pelo elemento antes de fazer A origem da transformação será no canto inferior direito. Ok, o problema está resolvido. Vamos definir uma função de rotação para o resto dos pedais A diferença entre os valores da função girada será de 30 graus. Para o terceiro pedal, precisamos de 60 graus. Então, o próximo será de 90 graus. Para o quinto pedal, precisamos de 120 graus. Então, o próximo será de 150 graus. Então, para o sétimo pedal , será de 180 graus. Em seguida, teremos 210 graus. Para o nono pedal, será de 240 graus Então teremos 270 graus. Para o 11º pedal, precisamos de 300 graus Para o último elemento , serão 330 graus. Tudo bem. Agora, como você pode ver, temos aqui um resultado muito melhor. Em seguida, vou tirar você do círculo. Ela será colocada no centro da flor. Vamos selecioná-lo e definir que está dentro da altura. Vou fazer com que os dois tenham cinco Ram. Então, a cor será branca. Vamos mudar a posição, torná-la absoluta. Para medir o elemento, vou definir as propriedades superior e esquerda, ambas em 50%, então precisamos transformar Translate com -50% novamente -50% . Então eu vou definir a borda, que será de 0,1 Ram sólido E a cor DDD também torna o elemento arredondado usando o raio da borda de 50%. Tudo bem, vamos falar sobre o círculo e antes de cuidarmos da haste, vou criar um ambiente de três D. E eu quero girar a flor levemente no espaço de três D. Para criar um ambiente de três D, precisamos usar uma propriedade chamada perspectiva. Vamos configurá-lo para 100 Ram. Então vamos girar a flor. Precisamos nos transformar. Gire X com um valor de 40 graus. Tudo bem, agora podemos seguir em frente e personalizar a haste. Vamos selecioná-lo e, primeiro de tudo, vamos definir essa posição. Faça o absoluto, então precisamos definir a largura. Altura, a largura será duas. Quanto à altura, vou fazer 60 m, vamos definir o plano de fundo. Vamos usar a função de classificação linear. A direção da transição de cores será da esquerda para a direita. Vou usar aqui três cores. O primeiro será RGB, 14923592. Em seguida, usaremos apenas a cor verde. Quanto à terceira, precisamos usar aqui a primeira função RGB com os mesmos valores Ok, então aqui temos a haste, mas como você pode ver, precisamos mudar a posição. Vamos fazer isso usando a função transform, translate Y, defina-a para 50%. Além disso, vou girar a haste de acordo com o eixo z em sete graus A haste é girada. Mas, novamente, precisamos mudar a origem da transformação. Nesse caso, precisamos chegar ao topo. Vamos colocar a origem da transformação no topo. Finalmente, precisamos colocar o caule atrás das pétalas. Para isso, vamos usar uma propriedade de índice com menos um. Ok, tudo está feito, na verdade. Você pode adicionar aqui alguns efeitos ou animações e desenvolver esse projeto sozinho . Te vejo na próxima vez. 9. Projeto 6 - Animação de Atom: Neste vídeo, vamos criar uma animação de átomos com HTML e CSS. O projeto vai ser pequeno, mas acho que vai ser engraçado e interessante. Você aprenderá sobre alguns novos truques e técnicas de CSS. Como você pode ver, temos aqui um átomo típico, que você pode ter visto em sua aula de química ou pode ter se deparado com um dos logotipos de editores populares. Quero dizer, o átomo. Temos aqui alguns círculos com bolas que se movem ao redor da bola principal. Vamos falar sobre o projeto, vamos começar a trabalhar nele. Eu criei uma nova pasta na área de trabalho chamada Atom. Vamos abri-lo no código VS e criar nossos arquivos de trabalho para HTML CSS. Em seguida, abra o arquivo HTML do índice e crie um documento HTML básico. Para isso, vou colocar aqui um ponto de exclamação e, em seguida, pressionar Top ou Enter Em primeiro lugar, vou mudar o título. Vai ser Atom. Em seguida, vamos vincular o arquivo CSS. Vamos abrir a tag de link, especificar aqui o caminho do arquivo. Finalmente, vou executar o projeto no navegador usando o servidor ativo. Vamos colocar o editor e o navegador lado a lado, assim, e começar. Primeiro de tudo, vou criar uma marcação HTML. Vamos abrir a tag profunda, que será o invólucro. No geral. Teremos três círculos e cada círculo terá uma bola. Vamos abrir, puxar profundamente o círculo da turma, circular um e abrir outra etiqueta profunda Dentro do círculo, precisamos de você, classe 1. Está bem? Vamos duplicar esse código e alterar os nomes das classes. Precisamos de círculos. Quero dizer círculo dois e círculo três e também bola dois e bola três. Ok, vamos falar sobre a marcação HD. Agora podemos começar a escrever um pouco de CSS. Em primeiro lugar, vou criar alguns estilos predefinidos e predefinidos para cada elemento. Vamos usar um risco Aster. Vou me livrar da margem e do preenchimento padrão. Vamos fazer com que os dois sejam zero. Além disso, vou definir o tamanho da caixa para a caixa de borda. Ao longo deste projeto, usaremos a RAM como uma unidade de medida. No momento, uma RAM é igual a 16 pixels. Como o tamanho da fonte do HTML é igual a 16 pixels, eu quero converter uma RAM em dez pixels. E para isso, temos que diminuir o tamanho da fonte do elemento HTML. Precisamos chegar a 62,5%. Tudo bem, vamos continuar respondendo para personalizar os elementos do corpo Vamos selecioná-lo e definir com altura. Vou definir com 100%. Quanto à altura, será 100% da janela de visualização Além disso, vamos mudar a cor de fundo. Vamos usar seu valor RGB, 46518. OK. Em seguida, vou selecionar o invólucro, definir sua largura Serão 60 m, então precisamos da mesma altura. Vou usar uma das propriedades chamada proporção. Com o valor um significa que, se aumentarmos a largura da embalagem, a altura também aumentará Além disso, vamos usar algumas cores temporárias do empacotador, digamos CC Aqui temos o invólucro, vou colocá-lo no centro da página Para isso, vamos usar a grade CSS. Precisamos de uma grade de exibição, coloque os itens no centro. Tudo bem, depois disso, vou criar os círculos. Vamos selecioná-los usando um nome de classe comum. Primeiro de tudo, vamos definir a posição. Eu vou fazer com que seja absoluto. Vamos 40 Ram, precisamos da mesma altura. Vamos usar novamente a proporção com valor um. Então eu vou usar borda agora com maior largura, digamos 0,5 Ram. Então, esse estilo será destruído. Essa é a cor. Vamos usar zero. Além disso, faça o elemento arredondado usando o raio da borda de 50% Ok, aqui temos os círculos Eles são colocados um em cima do outro, é por isso que vemos aqui apenas um círculo. Na verdade, não precisamos mais desse plano de fundo temporário, vamos nos livrar dele e depois colocar esses círculos. O centro da embalagem. Usando novamente, a grade de C. Precisamos exibir a grade e colocar os itens no centro. Tudo bem, agora temos que colocar cada círculo nessa posição. Quero dizer, devemos rotacioná-los. Precisamos colocá-los em um ambiente de três D. E para isso eu vou usar uma das propriedades CSS chamada perspectiva. Vamos configurá-lo para 100 Ram. Tudo bem, depois disso, vamos selecionar o primeiro círculo e girá-lo de acordo com os eixos y e x. Precisamos girar o círculo um de acordo com Y, x em 70 graus. Quanto à direção x , será de 40 graus. Como você pode ver, o primeiro círculo é girado. Vamos fazer o mesmo com o resto dos círculos. Vamos duplicar esse código. Altere o nome da classe que precisamos aqui. Gire x com o valor negativo de -40 graus. Então, novamente, duplique esse código para o terceiro círculo, precisamos de valores diferentes A rotação Y será de 180 graus. Quanto à rotação X, será de 90 graus. Todos os três círculos são girados, mas o terceiro não está visível no momento Para torná-lo visível, precisamos olhar para o espaço de três D de um ângulo diferente. Para fazer isso, podemos usar uma das propriedades do CS chamada origem da perspectiva. Precisamos alterá-lo de acordo com as direções x e y. O primeiro valor será 76% Quanto ao segundo valor, vou usar 27%. Agora acho que é um bom ângulo para olhar o projeto e um terceiro círculo está visível Tudo bem, agora é hora de seguir em frente e começar a trabalhar com bolas. Cada círculo terá uma bola. Primeiro de tudo, para compartilhar também o ambiente de três D para as bolas, precisamos usar o estilo de transformação, onde o valor preserve três D. Agora podemos criar as bolas, vamos selecioná-las usando um nome de classe comum, ball. Vou definir a largura, vamos fazer com que sejam seis Ram. Então, precisamos da mesma altura. Vamos usar novamente a proporção com o valor um. Vou mudar o plano de fundo. Nesse caso, vou usar gradiente radial. Ele mistura as cores do centro. A primeira cor será RGB 13521424. Então, a segunda cor será RGB 44, novamente, 44167 Precisamos misturar essas cores depois de 70% vamos usar aqui 70% também para alterar o raio, tornar o elemento arredondado Isso é 72, 50% Ok, então temos aqui as bolas. E agora vou girá-los porque, no momento, eles não parecem muito bons Precisamos da mesma rotação para a primeira e a segunda bolas. Vamos selecioná-los simultaneamente. E gire-os de acordo com a direção branca em -90 graus Quanto à terceira bola, precisamos girá-la de acordo com as duas direções, Y e X. Girar Y será de 90 graus, girar X também será de 90 Tudo bem, agora temos resultados muito melhores, mas as bolas não estão colocadas corretamente. Precisamos mudar as posições. Vamos definir a posição como absoluta, então a posição superior será menos três rampas Na verdade, os círculos devem ficar no centro das bolas. Precisamos de alguns cálculos para a posição esquerda. Vamos usar a função calc. Precisamos de 50% menos três Ram, que é metade da largura da bola Ok, as bolas estão posicionadas e agora podemos começar a trabalhar nas animações Vamos mover o círculo inteiro e não a bola. Vamos seguir em frente e usar quadros-chave CSS. Vou criar quadros-chave CS para o primeiro círculo. Vamos chamar o círculo de animação de um. Teremos duas etapas diferentes. Em 0%, precisamos da posição padrão que precisamos transformar, girar Y. Com sete graus e girar x Em 100%, precisamos das mesmas rotações. Além disso, gire Z com 360 graus. Ok, vamos aplicar esses estilos usando a propriedade de animação. Precisamos do nome círculo um. A duração será de 2 segundos. Além disso, precisamos executar a animação infinitamente. Vai ser linear. Como você pode ver, o círculo está se movendo e a bola também está se movendo com o círculo. Mas, na verdade, não é disso que precisamos na bola. Também vou executar as animações para o resto dos círculos e, em seguida, resolveremos esse problema Vamos copiar esse código daqui e colá-lo no segundo círculo. Vamos mudar o nome. Nesse caso, precisamos apenas tornar negativos os valores das funções de rotação x e, em seguida, pegar a animação Mude o nome. Tudo bem, vamos fazer o mesmo o terceiro círculo também. Nesse caso, precisamos aqui de valores diferentes. Vamos mudar o nome então. Com 0% de rotação, y será de 180 graus. Quanto à rotação X, será de 90 graus. Novamente em 100%, precisamos das mesmas rotações I, rotação Y e rotação X. Além disso, precisamos adicionar aqui a rotação Z Ok, então precisamos da propriedade de animação com o círculo três. Tudo bem, todos esses círculos estão animados e agora podemos cuidar das bolas Também precisamos das animações para eles. Durante a animação, precisamos que as bolas sejam exibidas com a parte frontal. Precisamos girá-los, precisamos girá-los contra os círculos durante a animação As duas primeiras bolas terão a mesma animação. Vamos usar SSKEframes. Para a bola do nome, teremos duas etapas. Em 0%, precisamos de rotação de acordo com y x em -90 graus. Em 100%, precisamos da mesma rotação. Além disso, gire x com -360 graus. Em seguida, executamos a bola de animação m 2 segundos, infinita e linear. Agora, como você pode ver, temos aqui um resultado muito melhor. Usamos aqui a função girar x com -360 graus. Na verdade, ele sempre compensará o movimento do círculo Ok, vamos fazer o mesmo com a terceira bola também. Vamos pegar esse código aqui e fazer algumas alterações. Eu vou mudar o nome, vão ser os dois. Então, precisamos girar Y com 90 graus. Além disso, precisamos da rotação de acordo com o eixo X. Com o mesmo valor, em 100%, precisamos girar Y 90 graus. Em seguida, gire X. Para mover a bola todo o círculo e também manter a posição correta, por todo o círculo e também manter a posição correta, precisamos girá-la 450 graus porque ela já está girada 90 graus mais 360 graus serão 450 graus. Ok, vamos usar animação. Precisamos de quaisquer 2 segundos, infinitos e lineares. Ok, agora tudo funciona bem. Só precisamos cuidar da bola principal. Vamos criá-lo usando o pseudo elemento anterior. Quero dizer, antes do terceiro círculo. Usaremos o pseudo-elemento anterior porque isso nos ajudará a gerenciar a ordem correta dos Em primeiro lugar, vou interromper a animação do terceiro círculo e também da bola para facilitar o processo de trabalho. Em seguida, selecione o círculo três antes. Vamos definir o conteúdo, deixá-lo vazio. A largura será de 12 Ram. Como precisamos da mesma altura. Usamos novamente a proporção com o valor um. O fundo será, novamente, gradiente radial. A primeira cor será branca. Precisamos de RGB 25053 vezes. Então, a segunda cor será, novamente, o valor RGB 55132146 Precisamos misturar essas cores depois 50% para tornar o elemento visível. Vamos definir a posição, torná-la absoluta. Aqui temos o elemento anterior ao traje. Na verdade, precisamos torná-lo arredondado. Vamos usar o raio da borda, 50% Precisamos mudar sua posição Vamos colocá-lo no centro. Precisamos da posição esquerda de 50% dos 50% superiores. Para colocar o elemento no centro perfeitamente, precisamos transformar a função de tradução -50% e -50%. Agora, o elemento está posicionado corretamente e a única coisa que precisamos fazer é girá-lo Vou girar o elemento de acordo com o eixo x em 90 graus. Tudo bem, vamos sentar sobre a bola principal. Vamos repetir a animação do terceiro círculo. Como você pode ver, a bola principal também está girando. E não precisamos disso. Precisamos mantê-lo como se fosse corrigido. Para isso, vamos criar uma nova animação com o nome bola principal. E teremos duas etapas. Em 0%, precisamos da posição padrão. Precisamos traduzir -50% -50% e girar x 90 graus. Quanto aos 100% que precisamos aqui, os mesmos valores mais a rotação y -360 graus Usamos aqui a mesma técnica que usamos nos casos anteriores. Vamos executar o plano principal da animação, 2 segundos, infinito e linear. Tudo bem, agora tudo funciona bem. Antes de terminarmos este vídeo, vou fazer algumas coisas. Vamos diminuir a largura das bordas, torná-la 0,1 Além disso, vou usar um tempo de atraso para a animação do primeiro círculo. Vamos usar -1 segundo. Na verdade, esse valor negativo significa que a animação perderá o primeiro segundo e será executada diretamente a partir do segundo segundo na primeira execução. Tudo bem, finalmente terminamos esse projeto. Espero que tenham gostado e aprendido coisas novas. Te vejo na próxima vez. 10. Projeto 7 - Helicóptero: Neste vídeo, vamos construir um helicóptero com HTML e CSS Como você pode ver, temos aqui um efeito voador. O helicóptero está sobrevoando a cidade, as pás estão Esse helicóptero inteiro foi criado com HTML e CSS e, na verdade, não é uma imagem Ok, isso é tudo sobre o projeto. Vamos começar a criá-lo. Eu preparei uma nova pasta na área de trabalho chamada Helicopter, na qual temos outra pasta para as imagens Vamos abrir essa pasta e o código BS e criar nossos arquivos de trabalho para HTML e CSS. Em seguida, abra o arquivo HTML do índice e crie um documento HTML básico. Vamos colocar aqui um ponto de exclamação e, em seguida, pressionar ou pressionar Enter Tudo bem, primeiro de tudo eu vou mudar o título. Vai ser um helicóptero. Em seguida, vamos vincular o arquivo CSS, abrir a tag de link e especificar aqui o nome do arquivo. Tudo bem, finalmente vou executar este projeto no navegador usando o servidor ao vivo. Vamos colocar o editor e o navegador. Tudo bem, vamos começar a criar a marcação HDML Vamos abrir a etiqueta profunda, que será o contêiner. Então, precisamos de outro rebocador com o helicóptero da classe. Incluirá todas as partes do helicóptero. O primeiro será o prato, que incluirá o prato principal. Em seguida, teremos que comer, em seguida, vem a cabine de comando. Então teremos esquis de aterrissagem. Teremos dois patins de pouso e eles terão nomes de classes comuns de derrapagem eles terão nomes de classes comuns aterrissagem e também as classes individuais de derrapagem de aterrissagem um e derrapagem de pouso Tudo bem, depois disso temos um pente para a cauda. Então, a próxima parte será a barbatana caudal. Finalmente, precisamos aqui do podador de cauda. Ok, então vamos falar sobre a marcação HTML. Vamos seguir em frente e começar a escrever CSS. Em primeiro lugar, vou começar a escrever alguns estilos redefinidos e padrão. Vamos selecionar cada elemento usando um risco. Vou me livrar da margem e do preenchimento padrão. Vamos definir as duas propriedades como zero. Em seguida, também vou definir o tamanho da caixa para a caixa de borda. Ao longo deste projeto, usaremos a RAM como uma unidade de medida. No momento, uma RAM é igual a 16 pixels. E eu quero converter uma RAM em dez pixels. Para isso, precisamos diminuir o tamanho da fonte do elemento H demil, e temos que torná-lo em 62,5%. Tudo bem, vamos seguir em frente e cuidar dos elementos do corpo Vou definir sua altura. A largura será de 100%. Quanto à altura, vou torná-la 100% da janela de visualização e também mudar a cor do fundo Vou usar aqui, verde claro. Tudo bem, depois disso, vou personalizar o contêiner. Vamos selecioná-lo e definir sua altura. A largura será de 150 Rams de altura. Vou fazer com que sejam 80 Rams. Mude a cor do plano de fundo. Vou usar aqui o valor RGB 88179253. Tudo bem, precisamos colocar o contêiner no centro da página e, para isso, vamos usar uma grade CSS. Precisamos exibir a propriedade com a grade de valores. Em seguida, coloque os itens no centro. Ok, isso é tudo sobre o contêiner por enquanto, cuidaremos disso um pouco mais tarde. Em seguida, vou começar a construir o helicóptero. Vamos selecionar o elemento de desenvolvimento do invólucro e definir que ele está dentro da altura A largura será de 80 Ram. Quanto à altura, vou fazer com que seja de 60 Ram. E também mude a cor do fundo, torne-a branca. Em seguida, vou colocar o helicóptero no centro do contêiner Novamente, vou usar a grade CSS. Precisamos exibir a grade e colocar os itens no centro. Ok, a primeira parte que vou criar é uma lâmina. Vamos selecioná-lo. Defina seu com altura. A largura será de 40 Ram. Quanto à altura, vou fazer com que sejam dois Ram. E também mude a cor do fundo, torne-a preta. Aqui temos o prato. mudar sua posição. Para isso, vou usar a posição absoluta. Na verdade, precisaremos de posição absoluta para cada parte. Vamos selecionar todos os desenvolvimentos dentro do helicóptero. Defina a posição dois absoluta. Vamos posicionar os elementos acordo com o desenvolvimento do invólucro Quero dizer, o helicóptero, precisamos de uma posição relativa para esse elemento Ok, vamos mudar a posição da lâmina. Vou definir a propriedade esquerda para 20 Ram. Quanto à primeira posição , será de 15 Ram. Ok, vamos falar sobre a lâmina por enquanto. Na verdade, usaremos cerca de três efeitos D algumas partes do helicóptero Voltaremos para a lâmina mais tarde. Em seguida, temos o rotor principal. Vamos definir sua altura interna. A largura será de cinco Ram. Quanto à altura, vou fazer com que sejam dois Ram. Vamos mudar a cor de fundo. Agora eu vou usar a cor vermelha, mas depois vamos mudá-la também. Vamos definir a posição esquerda, torná-la 17,5 Ram Ok, vamos seguir em frente e personalizar a próxima parte, que será a cabine Na verdade, esse elemento será toda a cabine do helicóptero e não apenas a janela Vamos definir com altura. Vou definir a largura para 20 Ram. Então a altura será de dez Ram. Vamos mudar a posição. Vamos definir a propriedade principal para 18,5 Ram. Então, a posição esquerda será de 30 Ram. Altere também a cor do fundo, torne-a preta. Ok, agora temos que cuidar da forma da cabine Ele será arredondado e faremos isso usando o raio da borda O canto superior esquerdo será 50%, então o canto superior direito será 40%, o canto direito será 40%. Precisamos do mesmo para o canto inferior. Tudo bem, depois disso, vou tirar a cabine real em que estou A janela o criará usando um elemento antes definido. Vamos selecionar a cabine antes de usar o elemento. Antes de tudo, precisamos definir o conteúdo. Vamos deixá-lo vazio. Em seguida, vou definir a largura e a altura. A largura será de oito Ram. Então precisamos de altura, serão cinco Ram. Além disso, vamos mudar a cor do fundo, fazer isso também, vamos definir a posição como absoluta. Ok, agora precisamos mudar um pouco a posição do elemento e torná-lo arredondado para caber na cabine. Vamos definir a propriedade principal para 0,2 Ram. E então, para tornar o elemento arredondado, vou usar novamente o raio da borda Precisamos de 100% e depois zero, depois 40% novamente zero. OK. É isso sobre a cabine Em seguida, vou personalizar os esquetes de pouso. Como você sabe, temos dois esquetes de pouso, eles têm um nome de classe comum Vamos usá-lo e selecionar os dois elementos. Em primeiro lugar, vou definir a altura conquistada. Vamos definir com 223 Ram, então a altura será de dez Ram Altere também a cor do plano de fundo. Eu vou usar a cor vermelha. Então vamos mudar isso. Criaremos os esquetes de pouso reais usando bordas. Precisamos de uma borda inferior com valores de um sólido Ram, a cor será preta. Então, precisamos de uma borda esquerda com valores de um sólido Ram. Transparente. Também precisamos da borda direita, que terá os mesmos valores. Finalmente, para alterar a forma do elemento, vamos usar novamente o raio da borda Os valores serão 002,5 Ram e cinco. Ok, agora temos um resultado muito melhor. Na verdade, não precisamos mais dessa cor de fundo vermelha. Vamos removê-lo. Depois disso, precisamos posicionar os elementos na parte inferior da cabine. Então, vamos selecionar Landing, Ski One. Defina as propriedades superior e esquerda. A primeira posição será de 22 Ram. Quanto à posição esquerda, será 26 Ram. Vamos duplicar esse código, mudar o nome. A primeira posição será de 20,5 Ram. Quanto à posição esquerda, será de 26,5 Ram. Tudo bem, os kits de pouso estão posicionados e agora temos que conectá-los à cabine Para isso, vou usar antes e depois dos elementos. Vamos selecionar os dois juntos. Antes de tudo, precisamos definir o conteúdo. Vai ficar vazio. Em seguida, precisamos de largura e altura. A largura será de um Ram. Quanto à altura, vou ajustá-la para cinco Ram. Além disso, vamos alterar a cor do fundo, torná-la preta e definir a posição como absoluta. Tudo bem, agora precisamos mudar as posições. Na verdade, ambos terão posição inferior definida como zero. Mas, além disso, precisamos definir uma posição à esquerda para cada elemento separadamente. Vamos selecionar o esquete de aterrissagem antes de definir a posição esquerda para oito Ram Então eu vou copiar esse código. Precisamos de um, temos que definir a posição esquerda para 18 Ram. Tudo bem, então com os esquetes de pouso terminamos. E a próxima parte que vamos personalizar é um pente para a cauda Novamente, vou definir largura e altura. A largura será de 25 Ram, então a altura será de dois Ram. E também mude a cor do fundo, torne-a preta. Ok, então aqui temos o cone da cauda. Vamos mudar sua posição. Vou definir a propriedade principal para 22 Ram. Então, a posição esquerda será 47 Ram. Finalmente, vou mudar a forma dos elementos usando novamente o raio da borda Precisamos aqui dos valores zero, 100% 100% e zero. Tudo bem, vamos sentar sobre a cauda, depois temos a barbatana caudal. Vamos selecioná-lo e primeiro definir com altura. A largura será de dois Ram, depois a altura será de oito Ram. Novamente, precisamos de uma cor de fundo preta. Ok, então aqui temos a barbatana caudal. Vamos mudar sua posição. Vamos definir as propriedades superiores e direitas. A primeira posição será de 19 Ram. Quanto à posição correta, vamos fazer com que seja de 7,5 Ram. Finalmente, vamos alterar a forma do elemento usando o raio da borda Os valores serão 100% 00.100% Ok, então a barbatana traseira está pronta e agora temos que cuidar da última parte do helicóptero, que é o rotor de que é o Vamos definir largura e altura. A largura será de um Ram. Quanto à altura, vou fazer com que sejam nove Ram. Além disso, precisamos mudar a cor de fundo. Vamos torná-lo preto. Então precisamos mudar a posição. Vamos definir as propriedades superiores e direitas. A primeira posição será de 18,5 Ram. Quanto à propriedade correta, vamos configurá-la para 6,5 Ram Ok, antes de fazermos o helicóptero voar, precisamos personalizar o mastro que conecta a cabine à lâmina Vamos selecionar esse elemento. Em primeiro lugar, vamos definir sua altura interna. Eu vou definir com um Ram, então a altura vai ser dois Ram. Em seguida, mude a cor do fundo, torne-a preta. Então, vamos mudar a posição que precisamos. Propriedade esquerda com o valor 39,5 Ram, depois posição superior com o valor 17 Ok, todas as peças são personalizadas e agora temos que fazer o helicóptero voar Vamos começar com a lâmina. Como dissemos, precisamos de cerca de três efeitos D para a lâmina. Para isso, temos que criar um ambiente de três D. Para fazer isso, precisamos usar uma das propriedades do CS chamada perspectiva. Vamos configurá-lo para 100 Ram. Tudo bem, depois disso, precisamos girar a lâmina Para isso, vou transformar com a função girar x. Precisamos girar o elemento acordo com a direção x. O valor será de 90 graus. A lâmina está girada e agora temos que girar o rotor principal Mas antes disso, precisamos compartilhar três ambientes D para o rotor principal Para fazer isso, temos que atribuir ao estilo de transformação da lâmina o valor preservar três D. Agora podemos girar o rotor principal Vamos transformar a rotação x com o valor de -90 graus Depois disso, vou adicionar uma pequena peça ao rotor principal Para obter um efeito muito melhor, precisamos fazer com que o rotor principal pareça uma cruz E eu vou fazer isso usando o elemento antes. Vamos selecionar o rotor principal com o elemento anterior. Primeiro de tudo, vou definir o conteúdo, vamos deixá-lo vazio. Em seguida, precisamos definir largura e altura. Vou tornar as duas propriedades 100%. Em seguida, mudaremos a cor do plano de fundo. Vou usar aqui uma cor de fundo temporária. Digamos que azul também. Vamos definir a posição como absoluta. Aqui temos os quatro elementos e eu vou girá-lo. Vamos transformar a rotação y, o valor será 80 graus, ok? Além disso, também precisamos de um ambiente de três D para esse elemento. Para isso, precisamos usar o estilo de transformação para o rotor principal com o valor preservar três D. Além disso, vou me livrar desse fundo branco a partir daqui Além disso, vou mudar as cores do rotor principal Vamos torná-lo preto. Tudo bem, agora é hora de animar o prato. Precisamos girar esse elemento. Vamos criar quadros-chave CSS. O nome será Blade No geral, teremos duas etapas, 0% e 100%. Em 0%, precisamos transformar a função girar X com valor de 90 graus. Também gire Z com zero em toda a animação. Precisamos girar os elementos de acordo com a direção z, 0-360 graus, a 100%. Precisamos transformar girar x com 90 graus e girar Z com 360 graus Ok, os quadros-chave estão prontos. Vamos continuar e executar a animação. Primeiro de tudo, precisamos aqui do nome dos quadros-chave. Lâmina qualquer, então a duração será de 1 segundo. A animação deve ser executada infinitamente, então precisamos aqui de infinito Além disso, a animação será linear. Está bem? Então, como você pode ver, a lâmina com o rotor principal está se movendo Agora também precisamos da mesma coisa para o rotor de cauda. Vamos criar quadros-chave dentro de um rotor traseiro. Além disso, precisamos girar o elemento acordo com a direção x, 0-360 Em 0%, precisamos transformar a rotação x com zero. Então, em 100%, precisamos transformar a rotação x com 360 graus. Vamos continuar e executar a animação. O nome será rotor de cauda Anim. Então, precisamos do ponto de duração de 1 segundo. Novamente, infinito e linear. Tudo bem, o helicóptero está voando e agora temos que cuidar do fundo do contêiner Vamos adicionar aqui uma imagem, precisamos de URL. Em seguida, pasta chamada imagens, e precisamos selecionar Gng Aqui temos o plano de fundo, mas não parece bom. Precisamos alterar o tamanho do plano de fundo. Vou dar a ele o mesmo tamanho que o contêiner tem. O tamanho do plano de fundo terá duas propriedades, 150 Ram e depois automático. Agora temos os melhores resultados. Mas, como você pode ver, a imagem de fundo se repete. Na verdade, precisamos repetir isso apenas horizontalmente. Vamos adicionar aqui a repetição x. Agora a imagem não é mais repetida, mas temos que mudar sua posição. Precisamos movê-lo para baixo em 100%. Vamos definir posição do plano de fundo com os valores de 0,100% Tudo bem, agora o plano de fundo está bom e agora vou adicionar animação a ele Vamos criar molduras de céu com o nome BGN. Teremos duas etapas diferentes, 0% e 100%. Durante a animação, precisamos mudar a posição do plano de fundo em 0%. Teremos a posição padrão 0,100%. Quanto aos 100% , a posição de fundo será 150 mim, cem por cento Vamos executar a animação. Precisamos do nome BG Anim. Então, a duração será de 10 segundos. Novamente, a animação deve ser executada infinitamente. Além disso, deve ser linear, ok? Como você pode ver, o fundo está se movendo e temos aqui um belo efeito de voo. Na verdade, estamos quase terminando esse projeto. Eu só preciso fazer algumas coisas. Vou girar um pouco o helicóptero. Vou girá-lo de acordo com a direção y. O valor será de -15 graus. Para tornar o projeto mais agradável, vou mudar a forma do contêiner Vamos fazer isso usando o raio da borda. Precisamos aqui de 0,5 Ram e 100 Ram. Tudo bem, então é isso, finalmente com este projeto, terminamos. Espero que tenham gostado e que tenha sido útil. Te vejo na próxima vez. 11. Projeto 8 - Bicicleta: Tudo bem, neste vídeo vamos construir um próximo projeto que é uma bicicleta. Como você pode ver, temos aqui uma bicicleta típica. Ele está movendo as rodas e os pedais estão girando usando animações CSS Todas as partes são criadas usando HTML. Não usamos aqui nenhuma das imagens. Tudo bem, vamos começar a construir o projeto. Eu criei uma nova pasta na área de trabalho chamada Bicycle, que agora está vazia. Vamos abri-lo no código VS e criar nossos arquivos de trabalho para HTML e CSS. Em seguida, abra o arquivo de e-mail de índice e crie um documento Mel clássico Para isso, temos que colocar aqui um ponto de exclamação e depois pressionar o topo ou Enter Em primeiro lugar, vou mudar o título. Vai ser uma bicicleta. Em seguida, vamos vincular o arquivo CSS. Abra o link e especifique aqui o nome do arquivo CSS. Finalmente, vou executar o projeto no navegador usando o servidor ativo. Em seguida, coloque o editor e o navegador como, ok, estamos prontos para começar a criar o projeto. Vou começar com a marcação HTML. Vamos abrir o rebocador profundo com a bicicleta da classe. Incluirá todas as diferentes partes da bicicleta. Vamos começar com a roda dianteira do Deep Tug. Esse elemento terá duas classes diferentes, uma para os estilos comuns e a próxima para os estilos individuais. Precisamos de roda e roda dianteira. Também teremos roda traseira. Vamos duplicar essa linha de código e alterar o nome da classe Em seguida, vem o garfo dianteiro. Este elemento incluirá a seguir, teremos o guidão e, em seguida, a barra transversal Depois disso, teremos quadros, quadro um, quadro dois. A próxima parte será o tubo de ajuste, que incluirá outros desenvolvimentos. Então teremos, em seguida, pedais de corrente e neblina traseira Podemos fazer com que todas as peças sejam criadas e agora temos que começar a estilizá-las. Em primeiro lugar, vamos criar alguns estilos predefinidos e predefinidos. Vou selecionar cada elemento usando um asterisco. Vamos nos livrar da margem e da colocação padrão, vou tornar as duas propriedades zero. Além disso, vou definir o tamanho da caixa para a caixa de borda. Ao longo deste projeto, usaremos Ram como unidade de medida. Por padrão, uma RAM é igual a 16 pixels e eu quero converter uma RAM em dez Para isso, precisamos diminuir o tamanho da fonte do elemento HTML. Vamos definir para 62,5% Ok, vamos seguir em frente. Resposta: para trabalhar no elemento corporal, vou definir sua altura interna. A largura será 100% da altura do corpo. Vou fazer com que seja 100% da porta de visualização. Em seguida, vou personalizar a bicicleta. Vamos definir sua largura e altura. A largura será de 85 Ram, depois a altura será de 60 Ram. Além disso, vou mudar a cor de fundo. Vamos usar aqui algumas cores temporárias. OK. Agora vou concordar com a bicicleta e a página Para isso, vamos usar a grade CSS. Precisamos atribuir à grade de exibição do elemento corporal e colocar os itens no centro. Tudo bem, então a bicicleta está centralizada e agora vou começar a personalizar as diferentes partes da bicicleta Vamos começar com as rodas. Vamos definir a largura, será 30 Ram. Em seguida, vou definir a altura com o mesmo valor e , portanto, vou usar uma das propriedades chamada proporção. Temos que configurá-lo para um. Nesse caso, se aumentarmos ou diminuirmos a largura, a altura será aumentada ou diminuída automaticamente. Ok, vamos mudar a cor de fundo, torná-la preta. Além disso, vou arredondar o elemento usando o raio da borda, 50% Em seguida, vou cuidar da posição Na verdade, precisamos posicionar todas as peças individualmente. Quero dizer, precisamos posicionar o absoluto para cada elemento dentro da bicicleta. Portanto, vamos selecionar cada desenvolvimento e atribuir a eles a posição absoluta. Além disso, temos que posicionar os elementos de acordo com a bicicleta. Quero dizer, o elemento pai, vamos atribuir a ele a posição relativa. Tudo bem, a seguir vamos definir uma posição inferior para as rodas. Vou defini-lo como zero, depois vou definir a borda. Vamos definir a largura, torná-la 0,5 Ram. A fronteira será destruída. Além disso, vamos usar a cor preta. Como você pode ver, a borda não está visível, a cor preta a cobre. Para corrigir isso, precisamos usar uma das propriedades chamadas clipe de fundo com uma caixa de conteúdo de valor. Tudo bem, vamos sentar ao volante agora. Em seguida, precisamos criar essa parte cinza dentro da roda. Faremos isso usando um pseudo-elemento after. Vamos selecionar Roda com o pseudo-elemento after. Em primeiro lugar, vou definir o conteúdo. Vai ficar vazio. Vamos configurar com 224 Ram. Novamente, vou usar a proporção com o valor um e, em seguida, usar uma cor de fundo temporária. Digamos que o vermelho também defina a posição como absoluta. Em seguida, vou criar o elemento ao redor dele usando o raio da borda de 50%. Além disso, vou colocá-lo no centro da roda Para isso, podemos usar a grade CSS, grade de exibição e colocar os itens no centro. Tudo bem, depois disso, vamos adicionar uma borda ao elemento after. A largura será de 9,5 Ram. A borda será sólida e também permitirá que você veja o DDD colorido Como você pode ver, a borda tornou o elemento maior. Para corrigir isso, temos que usar o tamanho da caixa. Na caixa de borda, na verdade, já definimos essa propriedade nos estilos padrão, mas ela não é aplicada a pseudoelementos, então precisamos usá-la novamente. Ok, finalmente vou me livrar dessa cor de fundo vermelho. Ok, agora as duas rodas estão juntas e vou mover a roda traseira para o lado direito. Vamos selecionar a roda traseira e definir sua posição correta para zero. Vou me livrar da cor de fundo da bicicleta. Tudo bem. Em seguida, vou estilizar o garfo dianteiro. Primeiro de tudo, vamos definir largura e altura. A largura será de três Ram. Quanto à altura, vou fazer com que seja 17 Ram. E depois mude a cor do fundo, torne-a preta. Vamos definir a posição dos elementos. Vamos definir a propriedade inferior para 15 Ram. Quanto à posição esquerda, será 16,5 Ok, depois disso, precisamos girar o Precisamos girá-lo de acordo com a direção Z. Precisamos transformar, girar Z com o valor de 20 graus. Na verdade, o garfo está girado, mas não é isso que queremos Ela é girada a partir do centro, porque a origem da transformação é definida como centralizada por padrão Precisamos mudar a origem da transformação. E temos que fazer com que fique no fundo esquerdo. Tudo bem, vamos dar uma olhada no projeto finalizado. Como você pode ver, o garfo tem uma pequena peça adicional abaixo. Vou criar essa peça usando o elemento before suit. Vamos selecionar o garfo dianteiro, seguido pelo elemento anterior ao traje Primeiro de tudo, vamos definir o conteúdo, torná-lo vazio. Em seguida, vou definir largura e altura. Vamos definir com 22m. A altura será de cinco Ram. Além disso, vou usar aqui uma cor de fundo temporária. Vamos usar novamente o vermelho e depois definir a posição como absoluta. Aqui temos os elementos, temos que mudar sua posição. Vamos definir a propriedade inferior como zero. Então vamos definir a posição esquerda, torná-la 0,5 Tudo bem, finalmente precisamos girar os elementos Além disso, temos que movê-lo um pouco para o lado esquerdo. Vamos transformar então. Gire Z 30 graus. Temos que traduzir a função x com o valor menos um m. Finalmente, vamos mudar a cor do fundo, torná-la preta A próxima parte que vamos personalizar será um tubo. Vamos selecioná-lo e definir sua largura e altura. A largura será de dois Ram. Quanto à altura, vamos fazer com que seja 12 Ram. Mude a cor do fundo, torne-a preta. Em seguida, defina as propriedades esquerda e superior. A posição esquerda será de 0,5 Ram. Quanto à primeira posição, vou fazer com que seja -12 Ram Como o garfo dianteiro, o tubo também terá uma pequena peça adicional Quero dizer essa parte aqui. Vamos criá-lo usando o pseudo-elemento anterior. Vamos selecionar o tubo seguido pelo pseudo-elemento anterior. Antes de tudo, defina o conteúdo, deixe-o vazio. Em seguida, vou definir a altura, ambas para três corridas, mudar a cor do fundo e torná-la preta. Então eu vou mudar a posição do elemento. Vamos definir a posição como absoluta e, em seguida, usar as propriedades esquerda e superior. A posição esquerda será de -0,5 corrida. Quanto à primeira posição, vou fazer com que ela corra 0,5 para a direita. Digamos sobre o tubo. Vamos seguir em frente e personalizar a próxima parte da bicicleta, que será o guidão Primeiro de tudo, vou definir com altura. Vamos definir com 28 Ram, então a altura será de dois Ram. Vamos mudar a cor de fundo, use novamente a cor preta. Em seguida, vou definir as posições superior e esquerda. A propriedade principal será 18 Ram. Quanto à posição esquerda, vou fazer com que seja 19 Ram. Ok, em seguida, vamos girar a transformação dos elementos. Gire a função Z com o valor de 15 graus. Tudo bem, vamos dar uma olhada no projeto finalizado. Como você pode ver, o guidão tem algumas peças adicionais que vou usar novamente antes e depois dos elementos do Cd. Vamos selecionar as barras de controle seguidas pelo elemento Cd anterior. Vou definir o conteúdo, vamos deixá-lo vazio. Em seguida, vou definir com dois formulários. Precisamos da mesma altura. Vou usar novamente a proporção com o valor um. Em seguida, mude a cor do fundo, torne-a preta. Em seguida, vamos definir a posição, torná-la absoluta. Em seguida, vou mudar a posição dos elementos e também torná-los arredondados. Vamos definir a propriedade principal para menos um Ram. Então, a posição esquerda será menos um Ram. E também precisamos aqui de um raio de borda com o valor de 50%. Tudo bem, vamos ver os elementos anteriores Vamos cuidar da segunda parte. Vou selecionar o guidão, seguido pelo elemento after Vamos deixar o conteúdo vazio. Em seguida, vou definir largura e altura. A largura será de 30 Ram, depois a altura será de dois Ram. Vamos mudar a cor do fundo, torná-la preta. Além disso, precisamos definir a posição como absoluta. Em seguida, vamos definir a posição esquerda e torná-la -15,5 Ram. Depois disso, vou girar o elemento e precisamos torná-lo ligeiramente arredondado Vamos usar transform rotate y. Nesse caso, precisamos girar o elemento de acordo com o eixo Y. O valor será de -70 graus. Também vou usar o raio de borda de dois Ram. Tudo bem, então a única coisa que temos que fazer em relação ao guidão é girar o elemento após s em um espaço de três D. Para isso, vou usar uma das propriedades chamadas perspectiva. Isso nos permite criar o ambiente de três D. Vamos definir essa propriedade, 250 Ram. Como você pode ver, isso é tudo sobre o guidão. Em seguida, vou cuidar da barra transversal. Vamos selecionar esse elemento e, antes de tudo, definir com altura. Eu vou montar com 227 Ram. Então, a altura será de 3,5 Ram. Altere também a cor do fundo, torne-a preta. Em seguida, precisamos definir as propriedades superior e esquerda. A primeira posição será de 22 Ram. Quanto à posição esquerda, vou fazer com que seja 26 Ram. Depois disso, precisamos girar os elementos. Vamos usar a rotação de transformação com o valor de 20 graus. Novamente, o elemento é girado do centro e temos que mudar a origem da transformação Nesse caso, temos que colocá-lo no topo esquerdo. Ok, finalmente vamos mudar a forma dos elementos. Deve ser arredondado no lado direito. Vou usar o raio da borda. Os valores serão os seguintes. Precisamos de zero, 50% 50% e novamente zero. Tudo bem, com a parte transversal, terminamos. Em seguida, precisamos tirar aqui as molduras. Vamos selecionar a moldura um, definir a largura e a altura. A largura será de 32 Ram. Então eu vou fazer com que a altura seja de 3,5 Ram. Mude a cor do fundo, torne-a preta. Então, vou definir as posições. A propriedade principal será 25 Ram. Quanto à posição esquerda, vamos torná-la 26 Ram. Em seguida, vou girar o elemento. Vamos transformar a rotação. O valor será de 45 graus. Novamente, precisamos mudar a origem da transformação. Vamos transformar a origem e colocá-la no topo esquerdo. Finalmente, vamos mudar a forma do elemento. Use novamente o raio da borda com o valor 0% 50% e novamente zero. Tudo bem, então vamos ver o primeiro quadro. Vamos seguir em frente e personalizar o segundo. Selecione o quadro dois e defina novamente a largura e a altura. Nesse caso, a largura será de 25 Ram. Então a altura será de dois m. Vamos mudar a cor do fundo, torná-la preta. Em seguida, vou definir as posições superior e esquerda. A propriedade superior será de 44 m. Quanto à posição esquerda, vou fazer com que seja de 45 Ram. Conforme admitido, a parte do elemento não é visível, ela é colocada atrás do volante Então, vamos resolver isso. Usando a propriedade do índice Z, vou defini-la com um valor maior que zero. Digamos que dez. Tudo bem, vamos seguir em frente e cuidar da próxima parte, que será um tubo. Vamos definir com altura. A largura será de três Ram. Então eu vou fazer a altura de 18,5 Ram. Vamos mudar a cor do fundo, torná-la preta. Eu vou mudar as posições do elemento. A propriedade principal será 30 Ram. Então precisamos da posição esquerda , serão 47 Ram. Além disso, vou girar o elemento. Vamos transformar a rotação Z com valor de 15 graus, veja acima do tubo Se dermos uma olhada no projeto finalizado, você verá que o tubo tem duas partes adicionais. Novamente, vou usar pseudoelementos antes e depois. Vamos selecionar o tubo seguido pelo pseudo-elemento anterior. Primeiro de tudo, vamos definir o conteúdo, torná-lo vazio. Em seguida, vou definir a largura. Serão dois Ram. Então precisamos de altura, que será de 11 Ram. Vamos mudar a posição, torná-la absoluta. Em seguida, vou definir a cor de fundo para preto. Em seguida, vamos definir as posições superior e esquerda. A propriedade principal será -11 Ram. Quanto à posição esquerda, vou fazer com que seja de 0,5 Ram. Ok, então vamos ver a primeira parte. Vamos seguir em frente e cuidar do segundo. Na verdade, vou duplicar esse código. Vamos mudar o antes para o depois. Então eu vou mudar a largura. Serão 2,5 Ram. A altura será de 1,5 Ram. Precisamos, aqui, voltar à cor para sermos pretos. Vamos mudar as posições superior e esquerda. A primeira posição será de menos três Ram. Quanto à posição esquerda, vou fazer com que seja 0,25 Ram Tudo bem, vamos seguir em frente e personalizar o assento. Vamos definir com altura. Vou fazer com que a largura seja de 12 Ram. Agora, a altura será de três Ram. Também mude a cor do fundo, faça preto. Em seguida, precisamos alterar as propriedades superior e esquerda. A primeira posição será de -12 Ram. Então, a posição esquerda será menos seis Ram. Em seguida, vou girar o assento. Vamos transformar. Gire com o valor de -12 graus. Além disso, precisamos mudar a forma do assento. Vamos usar o raio da borda com os valores 20%, depois um Ram duas vezes e 80%. Tudo bem, vamos sentar no assento a seguir Eu vou cuidar do garfo da mochila. Vamos definir com altura. Eu vou fazer com dois Ram, então a altura vai ser 25 Ram. Vamos mudar a cor do fundo, torná-la preta. Além disso, precisamos mudar as posições esquerda e superior. A posição esquerda será de 60 Ram. Então, a propriedade principal será 26 Ram. Além disso, precisamos girar os elementos. Vamos apenas transformar a rotação Z com o valor de -55 graus, conforme considerado A parte do garfo traseiro não é visível, ela é colocada atrás do volante Precisamos usar novamente a propriedade do índice Z. Vamos configurá-lo para dez. Ok, conforme admitido, a maior parte da bicicleta é construída. Em seguida, precisamos cuidar da manivela. Vamos definir com e altura. Vou definir as duas propriedades para dez Ram. Em seguida, mude a cor do fundo, torne-a preta. Além disso, precisamos arredondar o elemento usando a porcentagem do raio da borda Então vamos mudar a posição da manivela. Vamos definir as propriedades superior e esquerda. A primeira posição será de 40 Ram. Quanto à posição esquerda, vou fazer com que seja de 40 Ram. Em seguida, vamos adicionar a borda à manivela. A largura será de 0,3 Ram. A borda será tracejada e também definirá a cor Torne-a preta novamente Como você pode ver, a cor de fundo cobre a borda Precisamos usar novamente. Clipe de fundo com caixa de conteúdo de valor. Tudo bem, vamos sentar em volta da manivela. Vamos seguir em frente e cuidar das pétalas. Selecione esses elementos definidos dentro da altura. A largura será de 1,5 Ram. Então, a altura será de 17 Ram. Vamos mudar a cor do fundo, torná-la preta. Altere também a posição do elemento. Precisamos usar as propriedades superior e esquerda. A primeira posição será de 37 Ram. Quanto à posição esquerda, vou torná-la 44 Ram. Ok, em seguida, vamos girar o elemento. Vou torná-lo ligeiramente arredondado. Vamos usar a transformação Rotate Z com o valor de -12 graus. Além disso, precisamos limitar o raio de 0,5 Ram. Tudo bem, como você pode ver no projeto finalizado, precisamos colar as pétalas reais, essas duas partes Novamente, vamos usar antes e depois. Veja os elementos. Ambos os elementos terão alguns estilos comuns. Vou selecionar os dois juntos. Vamos definir o conteúdo, deixá-lo vazio. Em seguida, precisamos definir w e altura. A largura será cinco, depois a altura será de 1,7 Ram. Mude a cor do fundo, torne-a preta. Além disso, precisamos definir a posição como absoluta. Então vamos definir a posição esquerda. Vai ser -1,8 Ram. Por fim, vou fazer com que os elementos sejam arredondados. Use o raio da borda com o valor de 0,3 m. Agora, os dois elementos são colocados juntos Precisamos definir as posições separadamente. Vamos selecionar as pétalas antes e definir a posição superior. Faça com que seja 0,2 corrida. Quanto aos pedais, depois de precisarmos definir a propriedade inferior, execute 2.2 Tudo bem, é isso com as pétalas, terminamos. E a última parte que precisamos personalizar é uma corrente. Vamos definir com altura. A largura será de 31,5 Ram. Então, a altura será de 8,5 Ram. Também precisamos de uma fronteira. Vamos fazer com que seja de 0,5 Ram, preto sólido. E então defina a posição da corrente. A primeira posição será 41 Ram. Quanto à posição esquerda, vou fazer com que seja de 40,5 Ram Ok, em seguida, precisamos arredondar a corrente. Então, vamos usar o raio da borda com os valores cinco Ram, 50% 50% novamente cinco Ram Finalmente, precisamos tornar toda a cadeia visível porque, no momento , ela está parcialmente oculta. Vamos usar em relação ao índice com o valor dez. Tudo bem, finalmente terminamos de construir a bicicleta e agora temos que cuidar das animações Vamos começar com as rodas. Precisamos girá-los em 360 graus. Vamos criar quadros-chave. Vou chamá-la de bicicleta Anim. Na verdade, precisaremos dos mesmos quadros-chave para todas as partes que se moverão. Nesse caso, teremos duas etapas. Em 0%, precisamos definir a propriedade de transformação com a função de rotação e o valor será zero Em 100%, precisamos girar o elemento em -360 graus. Vamos continuar e executar a animação. Precisamos do nome dos quadros-chave. Bicycle Anim então a duração será de 5 segundos. A animação deve ser executada infinitamente. Além disso, será linear, certo? Continue, as rodas estão girando e agora temos que fazer a manivela e as pétalas funcionarem Na verdade, como eu já disse, precisaremos dos mesmos quadros-chave. Só precisamos definir a propriedade de animação. A única coisa que precisamos mudar aqui é a duração. Serão 10 segundos para os dois elementos. Quero dizer, a manivela e os pedais. Como você pode ver, a manivela e os pedais estão girando. A única coisa que precisamos fazer é executar a animação dos elementos antes e depois do traje. Mas, neste caso, eles devem ser girados nas direções opostas Para isso, precisamos adicionar aqui um valor adicional, reverso. Tudo bem, então é isso, terminamos de trabalhar na bicicleta, espero que tenha sido interessante e útil. Vamos passar para o próximo projeto. 12. Projeto 9 - sala 3D: Tudo bem, é hora de construir nosso próximo projeto, que será uma sala de três D. Como você pode ver, temos aqui uma sala em três espaços D. Há uma mesa no centro da sala e temos uma carta na mesa. Se clicarmos no botão, leia mais tarde, chegaremos à mesa e a letra girará Se clicarmos novamente no botão, voltaremos. Ok, vamos falar sobre esse projeto. Vamos começar a criá-lo. Eu preparei uma nova pasta na área de trabalho chamada Three D room, que agora está vazia. Vamos abri-lo no código VS e criar nosso índice de arquivos de trabalho do estilo HTML CSS e scripts. Este projeto usará um pouco de script Java. Vamos abrir o índice do arquivo HDL e criar um documento HDML básico Para isso, vou colocar aqui um ponto de exclamação e pressionar Tab ou Enter Primeiro de tudo, vamos mudar o título. Serão três salas D e, em seguida, vincularão os arquivos CSS e Java. Abra a tag do link e especifique aqui o nome do arquivo. Quanto ao arquivo de script, vou abrir o script e especificar o nome do arquivo Gels no atributo source Tudo bem, agora vou executar o projeto no navegador usando o servidor ativo. Além disso, vamos colocar o editor e o navegador como, ok, primeiro vou criar a marcação H ml Vamos abrir o puxão profundo que será a sala dentro da sala, teremos dois elementos diferentes O primeiro será o botão. Vamos abrir a tag do botão com a classe BTN com a letra de texto lida Quanto ao segundo, será a mesa. Dentro da tabela, teremos alguns elementos diferentes. A primeira será a carta. Vamos abrir H, etiqueta de três cabeçalhos com a letra da classe. Vamos inserir aqui um texto fictício. Em seguida, teremos três pernas da mesa. Vamos abrir a tag com a perna da mesa de aula. Além disso, precisamos aqui de outra tabela. Vamos duplicar essa linha de código duas vezes e depois alterar os nomes das classes Ok, finalmente precisamos deste andar. Vamos abrir o tag com a sala de aula. Tudo bem, então a marcação de e-mail em HD está pronta e agora é hora de começar a escrever CSS Em primeiro lugar, vou criar alguns estilos predefinidos e predefinidos. Vamos selecionar cada elemento usando um asterisco. Vou me livrar da margem e do preenchimento padrão. Vamos definir as duas propriedades como zero. Além disso, vou definir o tamanho da caixa para a caixa de borda. Ao longo deste ponto, usaremos Ram como uma unidade de medida. Por padrão, uma RAM é igual a 16 pixels e eu quero convertê-la em dez Que temos que diminuir o tamanho da fonte do elemento HTML. Vamos fazer com que seja de 62,5% Tudo bem, estamos prontos para personalizar o quarto Na verdade, acho que seria melhor se escondermos o botão na carta por um tempo, porque eu vou criar a tabela. Vamos comentar os dois elementos e, em seguida, selecionarei uma sala. Primeiro de tudo, vamos definir com altura. Vou definir a largura para 100% já que a altura será de 100% da janela de visualização Em seguida, mude a cor do fundo, torne-a preta. Ok, a seguir eu vou cuidar da mesa. Em primeiro lugar, vamos definir sua altura interna. Vou definir as duas propriedades como 60 depois vou mudar o plano de fundo. Nesse caso, usaremos uma função de gradiente radial. Isso nos permite criar uma transição de cores a partir do centro do elemento. Vou inserir duas cores diferentes, ambas serão valores RGBA A primeira linha será branca. Precisamos de 25053 vezes, então a opacidade 0,9 Quanto à segunda cor será 3819123, e a opacidade será 0,9 Ok, a seguir vamos fazer a tabela arredondada e também criar a borda então a opacidade 0,9 Quanto à segunda cor será 3819123, e a opacidade será 0,9 Ok, a seguir vamos fazer a tabela arredondada e também criar a borda. Vamos definir o raio da borda em 50% e , em seguida, criar a borda inferior com valores dois sólidos A cor será RGB 153.233.253 Depois disso, vou colocar a tabela no centro da página Para isso, vamos usar uma grade CSS. Precisamos exibir a grade e colocar os itens no centro. Ok, a mesa está centralizada. E agora eu vou girá-lo. Além disso, quero mover a mesa para dentro da sala mais profundamente. Antes de fazer isso, temos que criar um ambiente de três D para isso. Vou usar a propriedade chamada perspectiva. Vamos configurá-lo para 100 Ram. Depois disso, vou girar a mesa. Vamos usar a propriedade de transformação. Precisamos girar a mesa de acordo com o eixo x. O valor será de 70 graus. Além disso, precisamos mover a tabela de acordo com o eixo z. Vamos traduzir Z com o valor dez Ram. Ok, a mesa está girada. E agora temos que cuidar das pernas. Como você sabe, todas as três pernas têm uma perna de tabela com nome de classe comum. Vamos selecioná-lo e definir a largura e a altura. A largura será de três Ram. Quanto à altura, vou fazer com que seja de 35 Ram. Altere também a cor do plano de fundo. Vamos usar seu valor RGBA 29113116 e a opacidade 0,8 Ok, aqui temos as três pernas, mas como você pode ver, precisamos cuidar cuidar Vamos definir a posição como absoluta. Em seguida, defina as propriedades superior e esquerda. A primeira posição será de 30 Ram. Quanto à posição esquerda, vou configurá-la para 28,5 Ram Tudo bem, agora precisamos personalizar cada perna separadamente. Vamos começar com o primeiro. Precisamos girar a perna de acordo com os X e Z Xs. Antes de girarmos a perna, também precisamos compartilhar um espaço de três D para a perna Para fazer isso, precisamos usar propriedade chamada estilo de transformação com o valor preservado, três D. Ok, depois disso, podemos girar a perna Vamos selecionar a perna um da mesa e, em seguida, usar transformar, girar x com o valor de -60 graus, girar com o valor Tudo bem, então, como você pode ver, a perna está girada. Mas ele é girado do centro porque, por padrão, a origem da transformação está definida como central e precisamos alterá-la e torná-la superior Ok, agora temos um resultado muito melhor. Em seguida, vou fazer a perna arredondada, então vamos usar o raio da borda, cinco Ram e um Ram Então, vou adicionar uma borda no lado direito e também na parte inferior. Vamos usar a borda direita com os valores 0,3 Ram sólido. A cor RGB, 388587. Vamos duplicar essa linha de código e mudar a borda, direto para a parte inferior da borda Tudo bem, vamos sentar na primeira etapa. Vamos seguir em frente e cuidar do segundo. Na verdade, vou duplicar esse código. Vamos mudar o nome da classe. Serão dois. O valor da função de rotação Z será negativo Além disso, vou alterar os valores do raio da borda Precisamos de um Ram e cinco Ram. Por fim, em vez da propriedade da fronteira direita, precisamos aqui da fronteira esquerda Ok, a segunda etapa está pronta. Vamos seguir em frente e personalizar o terceiro. Vamos duplicar novamente o código, alterar o nome da classe. Precisamos aqui da terceira perna da mesa. Nesse caso, só precisamos girar os elementos de acordo com x x. E o valor será de -140 graus O raio da fronteira será de um Ram. Em vez de borda inferior, precisamos de borda, certo? Tudo bem, vamos ver as pernas e, na verdade, a mesa está pronta. Em seguida, vou cuidar do chão. Vamos selecionar esse elemento e primeiro definir com altura. No momento, vou tornar o piso um pouco menor e depois mudaremos esses valores. A largura e a altura serão de 60 Ram. Como você sabe, o chão parece o quadro-negro do peito. E vamos criá-lo usando uma das funções chamadas gradiente cônico repetitivo Essa função pertence à propriedade da imagem de fundo. Misturaremos duas cores diferentes e gerenciaremos o alinhamento das células usando alguns graus. O primeiro valor nessa função define a direção das células. Eu vou passar aqui de 90 graus. Em seguida, precisamos especificar a primeira cor. Vai ser preto. E precisamos aqui de zero graus e 90 graus. Na verdade, isso criará uma célula preta. Em seguida, precisamos especificar a segunda cor, que será 333 Quero dizer, a cor cinza. Também precisamos aqui de 90 graus e 180 graus. Depois disso, precisamos especificar o tamanho das células. Precisamos usar o tamanho do plano de fundo e os valores serão dez Ram. Novamente dez Ram. Como você pode ver, temos aqui as células, e elas parecem um quadro-negro no peito Como você pode ver, as células se repetem. Isso acontece porque, por padrão a propriedade de repetição em segundo plano está configurada para repetir. Se a alterarmos e não repetirmos, teremos apenas quatro células porque a função cônica repetitiva é executada uma vez e cria células nos eixos x e y. Ok, vamos nos livrar da propriedade de repetição de fundo. Em seguida, vou arredondar o piso. Vamos usar o raio da borda com o valor 50%. Depois, vou definir a posição como absoluta Precisamos mover o piso para baixo. Vamos usar transform translate Z com o valor -23 Ram. Tudo bem, na verdade, já podemos aumentar o tamanho do piso. Vamos alterar os valores da largura e da altura, torná-los 160. Tudo bem, depois disso, precisamos colocar o chão no centro da sala. Para isso, vou usar o CSS Flax box, precisamos de display flax precisamos de display flax Em seguida, justifique um centro de conteúdo e um centro de itens de linha. Tudo bem, depois disso, vamos adicionar algum efeito de sombra. Além disso, vou esconder a parte do piso que está fora da sala. Vamos usar o box shadow. Precisamos da sombra dentro do elemento que precisamos usar aqui em St menos cinco, menos cinco, depois dez E a cor preta também precisamos aqui novamente entre cinco Ram, dez Ram, e a cor preta para esconder o chão que está fora da sala, precisamos usar o transbordamento oculto Tudo bem, é isso. O chão e a mesa estão prontos e agora podemos cuidar da parte inferior e da segunda. No momento, eles estão escondidos. Vamos continuar e torná-los visíveis. Vamos selecionar a parte inferior que define a altura. Vou definir as duas propriedades para 15 Ram. Em seguida, altere a cor do plano de fundo. Também altera a cor do texto. Vamos usar o valor RGB 252357. Ok, em seguida, vou mudar a posição da parte inferior. Vamos definir a posição como relativa e, em seguida, definir as propriedades superior e esquerda. A primeira posição será de dez Ram. Quanto à posição esquerda, vou fazer -40 Tudo bem, depois disso, vou mudar a forma da parte inferior Além disso, vou adicionar uma borda a ela. Vamos alterar a forma do elemento usando os valores do raio da borda que serão 50% duas vezes, depois 0,50%. Quanto à borda, vou torná-la 0,3 A cor será RGB 252357. Tudo bem, depois disso, vamos personalizar o texto da parte inferior. Vou aumentar o tamanho do telefone, vamos fazer com dois Ram e depois transformar o texto em maiúsculas. Além disso, vou criar algum espaço entre as letras, tornando-o em 0,2 Ram. Em seguida, vou aumentar a altura da linha. Vamos torná-lo 1.5 Por fim, altere o tipo do cursor, torne-o ponteiro Tudo bem, o botão é personalizado. Em seguida, vou cuidar da carta. Vamos selecioná-lo. E antes de tudo define dentro da altura. Eu vou definir com 215 Ram, então a altura vai ser 25 Ram Vamos mudar a cor do fundo, torná-la branca. Em seguida, vou criar o espaço dentro da carta. Vamos fazer isso usando preenchimento. Vamos configurá-lo para duas RAM na parte superior, uma RAM no lado direito, duas RAM na parte inferior e uma RAM no lado esquerdo. Vamos mudar a cor, torná-la 555. Use também um pequeno efeito de sombra. Use box shadow com o valor 00,1 Ram e o chamador Tudo bem. Agora é hora de cuidar do telefone, da carta. Na verdade, vou usar um dos telefones do Google. Vamos visitar o site do Google Phones. Vou pesquisar um telefone chamado Dancing Script. Vamos selecionar o primeiro estilo, clicar em Importar, pegar o URL e colá-lo no arquivo CSS. Tudo bem, agora podemos definir a família de telefones. Vamos atribuir ao roteiro de dança a letra cursiva, depois alterar o tamanho do telefone, torná-lo 1.5. Finalmente, vou criar um pequeno recuo Vamos usar texto em dente com valor de 0,5 Ram. Tudo bem, então está tudo pronto. E agora podemos fazer esse botão funcionar. Depois de clicar nele, precisamos entrar na sala, alcançar a mesa e a letra deve girar. Para isso, vou usar um pouco de Javascript. Temos que adicionar um ouvinte de eventos ao botão com um evento de clique Primeiro de tudo, vou selecionar a parte inferior. Vamos consultar o método seletor. Precisamos especificar aqui o nome da classe, BTN. Em seguida, temos que adicionar ouvinte de eventos na parte inferior com o evento de clique E também temos que passar aqui uma função de retorno de chamada que será executada assim que clicarmos no botão Vou adicionar uma nova classe à tabela. Em seguida, usando essa classe, definiremos novos estilos em CSS que precisamos adicionar ao elemento ao clicar. Agora precisamos selecionar a tabela. Vamos usar novamente o método seletor de consultas. O nome da classe será table. Depois disso, precisamos usar uma propriedade chamada lista de classes que nos fornece todas as classes que o elemento tem. Agora vou usar um dos métodos chamado togal. Na verdade, esse método nos permite adicionar uma classe ao elemento, se ele não tiver, e removê-la. Se tiver, o nome da turma será, digamos, mudar. Ok, vamos falar sobre o Javascript. Vamos voltar ao arquivo CS e selecionar a tabela com uma mudança de classe. Precisamos girar a mesa de acordo com x, xs. Além disso, precisamos movê-lo de acordo com as direções y e z que precisamos aqui. Gire o valor da função x em 80 graus e, em seguida, traduza Y, o valor será 30 Ram E também traduza Z com valor dez Ram. Depois de clicar no botão, entraremos na sala, mas, como você pode ver, precisamos tornar esse efeito mais suave Para isso, vou usar a transição. Precisamos aqui para nos transformar. E a duração de 2 segundos, agora temos um resultado muito melhor. Mas, como você pode ver no próximo clique, não temos mais um efeito suave. Precisamos de outra transição como padrão para a tabela. Agora tudo funciona bem. Na verdade, acho que precisamos girar a mesa um pouco mais de acordo com o x x. Agora ela está girada em 70 graus Vamos alterar o valor e torná-lo em 80 graus. Tudo bem, eu acho que é muito melhor. Vamos continuar e cuidar da carta. Vamos selecionar Mudança de Classe seguida pela letra. Vou girar a letra de acordo com x x. O valor será de -80 graus, conforme O último está girando, mas está girando a partir do centro Precisamos mudar a origem da transformação. Vai ser o fundo do poço. Agora o problema está resolvido e temos que tornar a rotação mais suave Vamos usar novamente a transição. Precisamos nos transformar. A duração será de 1 segundo. Além disso, precisamos aqui de um pequeno atraso. Serão 2 segundos, como a mesa. Precisamos de outra transição como padrão. Tudo bem, agora tudo funciona bem. A única coisa que eu quero fazer é adicionar um tempo de atraso para a tabela quando nos afastarmos dela. Vamos adicionar aqui 1 segundo. Tudo bem, então é isso. Tudo funciona perfeitamente com este projeto, terminamos. Espero que tenha sido interessante e você tenha aprendido coisas novas. Nos vemos no próximo projeto. 13. Projeto 10 - Swing 3D: Tudo bem, é hora de criar nosso último projeto neste curso. Vai ser um balanço de três D. Como você pode ver, temos aqui algumas oscilações em um espaço de três D. Eles estão balançando. E também temos aqui uma pequena bola que está se movendo de um balanço para outro Criaremos esses efeitos com animações CSS e três transformações em D. Ok, isso é tudo sobre o projeto. Vamos continuar e começar a construí-lo. Eu criei uma nova pasta na área de trabalho chamada Three D Swing, que agora está vazia Vamos abri-lo no código VS. Crie nossos arquivos de trabalho para HTML e CSS. Em seguida, abra o índice do arquivo HDL e crie um documento HDML básico Vamos colocar aqui um ponto de exclamação e, em seguida, pressionar Top ou Enter Vamos mudar o título. Vou inserir aqui três D Swing, depois vincular o arquivo CSS, abrir a tag de link e especificar aqui o nome do arquivo CSS Ok, finalmente, vou executar o projeto no navegador usando um servidor ativo. Além disso, vamos colocar o editor e o navegador dessa forma. Tudo bem, estamos prontos para construir o projeto. Primeiro de tudo, vou começar com a marcação HTML. Vamos abrir o rebocador profundo, que será o contêiner Em seguida, vou criar o swing. Vamos abrir o De Tu com o baloiço da turma. Swing one Dentro do balanço, teremos alguns elementos diferentes Teremos quatro círculos. Vamos abrir um puxão profundo com o círculo da turma e circular um Em seguida, vou duplicar essa linha de código três vezes e alterar os nomes das classes Também teremos duas cordas. Vamos abrir a tag com a classe rope e rope one, depois duplicar essa linha de código e alterar o nome da Ok, no geral, teremos seis oscilações. Mas, no momento, acho que seremos melhores se criarmos apenas um. Depois de personalizá-lo, cuidaremos do resto deles. Ok, isso é tudo sobre a marcação HDml. Por enquanto, vamos começar a escrever CSS. Em primeiro lugar, vou criar alguns estilos predefinidos e predefinidos. Vamos selecionar cada elemento usando um asterisco. Vou eliminar a margem e o preenchimento padrão. Vamos definir as duas propriedades como zero. Além disso, vou definir o tamanho da caixa para a caixa de borda. Ao longo deste projeto, usaremos o Ram como uma unidade de medida. Por padrão, uma RAM é igual 16 pixels e eu quero convertê-la em dez Para isso, temos que diminuir o tamanho padrão do elemento H timul. Vamos configurá-lo para 62,5%. Tudo bem, em seguida, vamos retirar o contêiner Vou definir a altura do wen. A largura será de 100%. Quanto à altura, vou torná-la 100% da janela de visualização Em seguida, vou mudar o plano de fundo do contêiner. Nesse caso, vou usar uma função de gradiado radial Se dermos uma olhada no projeto finalizado, você verá que a transição de cores do preto para o azul começa no canto superior esquerdo da página. Primeiro de tudo, precisamos especificar esse local. Vou usar o local mais próximo em 5% 10%. Na verdade, esses valores percentuais são como as coordenadas. Depois disso, vamos especificar as cores. O primeiro será preto. Vamos usar RGB com zeros. Quanto à segunda cor , será azul. Vamos usar o RGB 115488. OK. A última coisa que precisamos fazer em relação ao plano de fundo é aumentar a transição de cores. E para isso, vamos adicionar aqui 1.000% Tudo bem, vamos sentar ao redor do contêiner Por enquanto, vamos seguir em frente e cuidar do balanço. Primeiro de tudo, vamos definir com altura. Eu vou definir com 242 Ram, então a altura vai ser 20 Ram Altere também a cor do plano de fundo. Vou usar o valor RGBA 2621691 e a Opacidade 0,7. Aqui temos o swing e precisamos colocá-lo no Para isso, vou usar o CSS Flexbox. Precisamos do Display Flex. Em seguida, justifique um centro de conteúdo e um centro de itens de linha. Tudo bem, agora vou girar o balanço e depois vamos dar a ele uma forma de três D. Na verdade, vou girar o balanço de acordo com as três direções Quero dizer x z e y x. Então, à medida que você transforma e gira a função x, o valor será de 70 graus. Então precisamos girar Z se o valor for -40 graus. Finalmente, gire cinco graus. Tudo bem, o elemento está girado. Como eu disse, vou dar ao balanço uma forma de três D. Primeiro de tudo, precisamos criar um ambiente de três D para isso. Vou usar perspectiva com valor 150 Ram. Vou criar uma forma de três D usando elementos de CD antes e depois e precisamos compartilhar um espaço de três D com eles também. Para isso, vou usar propriedade chamada transform style com o valor preserve três D. Tudo bem, seguir vamos selecionar um swing com um elemento anterior Primeiro de tudo, vamos definir o conteúdo, deixá-lo vazio. Em seguida, vou definir a largura e a altura. A largura será de um Ram como altura de poliéster. Vou fazer com que seja 100% também mude a cor do fundo. Vou usar aqui a cor B4b 65 também definir a posição Ok, aqui temos o elemento anterior ao traje no lado esquerdo do balanço Vamos rotacioná-lo. Transforme a rotação Y com valor de 90 graus. O elemento é girado, mas, como você pode ver, ele é girado a partir do centro Precisamos mudar a origem da transformação. Vamos usar a origem da transformação e torná-la esquerda. O lado esquerdo está pronto. Vamos continuar e cuidar da parte frontal. Vou selecionar swing with depois de ver o elemento. Vamos definir o conteúdo, deixá-lo vazio. Então eu vou definir a altura para um Ram. Então a largura será 100%. Mude a cor do fundo, vou usar aqui a cor dois, C seis. Também mude a posição, torne-a absoluta. Ok, aqui temos os elementos posteriores. Como você pode ver, precisamos mudar a posição. Ele deve ser colocado na frente do balanço. Vamos definir a propriedade inferior e torná-la zero, ok? Em seguida, vou girar os elementos. Nesse caso, precisamos girá-lo acordo com a direção x. Vamos definir a função girar x em 90 graus. Como você pode ver, assim como antes do elemento, precisamos mudar a origem da transformação. Aqui vai ser o fundo. Tudo bem? Como você pode ver, o balanço tem uma forma de três D. Em seguida, vou pegar aqui os círculos, quero dizer aqueles detalhes que são colocados nos cantos do balanço Vamos selecionar o círculo definido dentro da altura. Vou definir as duas propriedades para três RAM e depois alterar a cor do plano de fundo. Vou usar aqui o C5757. Em seguida, vou arredondar o elemento usando o raio da borda com o valor de 50%. Depois disso, vou cuidar das posições dos círculos Vamos definir a posição como absoluta. Em seguida, vou definir as posições separadamente para cada círculo. Vamos começar com o primeiro. Vou definir as propriedades superior e esquerda. Vamos definir as duas posições para um Ram. Em seguida, vou duplicar esse código e alterar o nome da classe Também precisamos aqui da posição direita em vez da esquerda. Em seguida, vem o terceiro círculo, como duplicata, novamente o código altera o nome da classe Nesse caso, precisamos das posições inferiores direitas. Então vamos definir a posição para o último círculo seja o quarto. Precisamos do fundo e da esquerda. Tudo bem, todos os quatro elementos estão posicionados. Em seguida, vou criar esses elementos brancos que são colocados no topo dos círculos. Nós os criaremos usando o elemento anterior ao traje. Vamos selecionar o círculo seguido pelo elemento anterior ao traje. Antes de tudo, vamos definir o conteúdo. Precisamos que esteja vazio. Em seguida, vou definir com altura, ambas para 1,8 Ram. Em seguida, altere a cor do plano de fundo. Eu vou usar aqui 988. Também defina a posição como absoluta. Aqui temos os elementos anteriores. Vamos fazer com que sejam arredondados. E também precisamos colocá-los no centro dos círculos. Vamos usar o raio da borda, torná-lo 50%. Então para colocar os elementos no centro, vou usar a grade CSS Precisamos exibir a grade e colocar os itens no centro. Tudo bem, agora, para criar um efeito melhor, vou mover os círculos brancos um pouco para cima em um espaço de três D. Primeiro de tudo, precisamos compartilhar um ambiente de três D com o elemento anterior. Para isso, vou usar estilo transform com o valor preserve três D. Então, para mover os elementos para cima, vou transformar a função translate Z com o valor 0,3 m. Tudo bem, vamos ver os círculos externos. Vamos seguir em frente e cuidar das cordas. Selecione-os usando um nome de classe comum. Vou definir largura e altura. Vamos definir a altura para 40 Ram e a largura será de 0,3 Ram. Além disso, vou definir a cor de fundo para branco. Aqui temos as cordas e precisamos cuidar das posições Vamos definir a posição como absoluta. Em seguida, vou definir as posições da corda um e da corda dois separadamente Vamos começar com a corda. Vou definir as propriedades superior e esquerda. A primeira posição será de dez Ram. Quanto à posição esquerda, vou fazer com que seja de 2,5 Ram. Vamos duplicar esse código, mudar o nome da classe. Precisamos da corda dois em vez da posição esquerda. Precisamos aqui da posição correta. Ok, as cordas estão posicionadas e, em seguida, vou girá-las e também movê-las um pouco Vamos transformar. Traduzimos que o valor da função Z será de 20 m. Depois, vou rotacionar o elemento de acordo com os eixos x e y. O valor da função rotacionar x será de 90 graus. Então, precisamos girar y com o mesmo valor. No momento, as cordas estão giradas a partir do centro. E precisamos mudar a origem da transformação. Nesse caso, precisamos configurá-lo para o topo. Tudo bem, as cordas estão prontas, quero dizer, as partes superiores e agora precisamos criar as peças adicionais abaixo E eu vou fazer isso usando elementos antes e depois. Vamos selecionar a corda antes de os elementos definirem o conteúdo, precisamos estar vazios Em seguida, vou definir a largura e a altura. A largura será de 0,3 Ram. Quanto à altura, vou fazer com que seja 23 Ram. Vou usar anos na cor de fundo temporária, digamos vermelho, e depois definir a posição como absoluta. Aqui temos os elementos anteriores. Precisamos mudar as posições. Quero dizer, precisamos movê-los para baixo e também precisamos girá-los. Vamos transformar a função translate y. O valor será de -23 Ram. E também precisamos girar a função Z com valor de 21 graus. Os elementos são girados a partir do centro. E temos que mudar a origem da transformação. Nesse caso, deve estar no fundo. Tudo bem, é isso, sobre o antes do elemento. Vamos mudar a cor do fundo, torná-la branca. Para criar a segunda parte, vamos duplicar esse código Precisamos mudar o antes para o depois. E também precisamos alterar o valor da função de rotação Nesse caso, precisamos aqui de um valor negativo. Tudo bem, finalmente o swing está pronto e agora temos que criar a animação Antes disso, vou mudar um pouco a posição do balanço Vamos definir a posição como absoluta. Então eu vou definir a primeira posição. Vamos fazer com que seja de 50% em toda a animação. Vamos mover o balanço de acordo com o eixo y. Quero dizer horizontalmente em um espaço de três D. Vamos criar molduras celestes. Vou chamá-lo de Swing An, teremos algumas etapas diferentes Em cada etapa, alteraremos o valor da função translate y. Além disso, precisamos especificar a rotação atual do elemento em cada etapa. Vamos começar com os 0% Vou pegar a rotação atual a partir daqui. Vamos adicionar a função translate y. O valor na primeira etapa será de 100 m. Em seguida, vem 20%. Vamos copiar a propriedade transform , o valor da função translate y. Nesse caso, vou inserir 21 Ram para você. Em seguida, vem 25%, o valor será de 27 Ram. Então, com 35,40%, teremos aqui os mesmos estilos. Vamos inserir aqui Transform e alterar o valor da função translate Y que será zero. Com 50%, o valor será de -60 Ram. Em seguida, vem 55%. Vou alterar o valor e torná-lo -55 Ram Então, com 65,70%, o valor será de -84 Ram. Finalmente, em 100%, precisamos esconder o balanço. Vou usar um valor mais alto, digamos -800 Tudo bem, os quadros-chave estão prontos Agora podemos executar a animação. Vamos selecionar o swing one. Precisamos inserir aqui o nome da animação. Swing anim, então a duração da animação será de 20 segundos Precisamos executar a animação infinitamente. Além disso, vamos definir a função de temporização da animação. Eu vou escolher aqui, entrar e sair. Como você pode ver, o balanço está se movendo e a animação funciona bem Eu quero fazer aqui algumas coisas. Antes de tudo, quero mudar a origem da transformação. Vamos colocá-lo no topo. Além disso, no início da animação, chegamos aqui às barras de rolagem. Para corrigir isso, precisamos usar overflow ten. Ok, o primeiro swing está pronto. É animador. Vamos duplicar a primeira oscilação no H tm do Mude o nome da classe que precisamos aqui, Swing two, então eu vou duplicar esse código em CSS então eu vou duplicar esse código em CSS. Altere o nome da classe. Além disso, vou adicionar aqui um tempo de atraso, mas com um valor negativo, precisamos de -4 segundos. Isso significa que os primeiros 4 segundos da animação serão perdidos para o segundo swing Ok, tudo funciona perfeitamente da mesma maneira. Também vou criar outros três balanços. Vamos duplicar esse código três vezes. Altere os nomes das classes de três para cinco. Em seguida, duplique também a animação no arquivo CS. Altere os nomes das classes e também precisamos alterar os tempos de atraso. Precisamos de -8 segundos, depois -12 segundos e -16 segundos Tudo bem, todos os balanços estão se movendo bem, e agora temos que cuidar da bola, que torna o projeto mais divertido para a bola, vou criar um balanço adicional Vamos duplicar o balanço mais uma vez, depois inserir aqui um puxão profundo com a bola da turma Aqui temos um novo balanço que não está se movendo no momento porque não temos a animação para ele Agora vou personalizar a bola. Vamos definir a largura, torná-la sete Ram. Então, precisamos da mesma altura. Vou usar aqui uma propriedade chamada proporção com valor um. E então vamos mudar o plano de fundo. Nesse caso, vou usar uma função de gradiente radial Precisamos misturar duas cores. A primeira será RGBA 159-23-8156 e a opacidade 0,9 Quanto à segunda cor, será 3116, e a opacidade 0,8 Ok 159-23-8156 e a opacidade 0,9 Quanto à segunda cor, será 3116, e a opacidade 0,8 Ok. Em seguida, vou mudar a posição da bola e também precisamos torná-la arredondada. Vamos definir a posição como relativa e, em seguida, definir as propriedades esquerda e superior. A posição esquerda será de 15 Ram, então a posição superior será de dez Ram. Além disso, vamos usar aqui o raio de borda de 50%, ok? Depois disso, precisamos girar a bola. Precisamos girá-lo acordo com as direções x e y. A função de rotação X será de 90 graus. Quanto ao valor da função de rotação y, vou torná-la em 40 graus. Novamente, precisamos mudar a origem da transformação porque agora a bola é girada a partir do centro Vamos colocar a origem da transformação no topo. Tudo bem, finalmente vamos adicionar um pequeno efeito de sombra à bola. Use box shadow com os valores 00.2 Ram na chamada de 333 Tudo bem, então é isso, a bola está pronta e agora temos que cuidar da animação. Criaremos a animação para o sexto swing. Então, eventualmente, esconderemos esse balanço recém-criado e exibiremos apenas a bola Vamos criar quadros-chave S. Vou chamá-lo de swing six e teremos apenas três etapas a 0% de que precisamos novamente. A rotação atual do swing, como os quadros-chave anteriores, moverá os elementos de acordo com o eixo y. Vou adicionar aqui a função translate y, e o valor será zero. Em seguida, adicione 50%, precisamos mover o elemento em 30 m. Quanto à última etapa, quero dizer 100%, precisamos novamente traduzir Y zero. Ok, vamos continuar e executar a animação. Selecione swing six, o nome da animação. Swing six, Anum, a duração será de 4 segundos. Então, precisamos aqui de um tempo de atraso com novamente valor negativo -1 segundo. A animação será infinita. Além disso, precisamos relaxar aqui. Está bem? Como você pode ver, o balanço está se movendo agora Precisamos esconder isso. esconder tudo, exceto a bola. Vamos esconder todos os desenvolvimentos no swing six, exceto a bola Vamos balançar seis. Então, precisamos usar a pseudoclasse. Temos que especificar aqui o nome da classe, Paul. Para ocultar os elementos, vou usar a opacidade zero. Está bem? Em seguida, vou esconder os elementos antes e depois. Vamos selecionar o swing six com antes e depois também. Use novamente a opacidade zero. Por fim, vou tornar a cor de fundo do balanço transparente. É isso mesmo. Nós terminamos de trabalhar neste projeto. Tudo funciona perfeitamente. Espero que tenham gostado desse projeto, e tenha sido interessante ao finalizar esse projeto, nosso curso acabou. Espero que tenha sido o curso certo para você e que você aprenda algumas coisas novas sobre essas duas tecnologias, quero dizer, HTML e CSS. O curso era relativamente avançado. Se você teve problemas para entender e acompanhar os vídeos, recomendo assisti-los novamente, testar o código e tentar criar projetos semelhantes por conta própria. Tudo bem Desejo a você tudo de bom. Boa sorte Tchau tchau.