Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - 📚Como fazer animação HTML e CSS

#AnimacaoCSS #FrontEnd #Css3 #html5 Neste vídeo, vamos fazer uma animação para simular o sinal de trânsito Brasileiro. No HTML vamos criar o cabeçalho e colocar um link para o arquivo CSS, no body colocamos uma div container, e dentro dela, vamos fazer o retângulo, com uma div content, depois faremos as três div para sinalizar as cores do sinal. E por fim um span para a sua base. No CSS, vamos alinhar os itens, depois daremos formas com borda e cor. Em seguida, daremos formas para os três círculos, com tamanho e bordas. Para a animação, vamos fazer um @ keyframes para cada cor do sinalizador, com um background linear gradiente. 📚 Muito Obrigado por Assistir! SAIBA MAIS 📌https://www.youtube.com/c/WebOnlineDesenvolve 📌https://github.com/WebOnlineDesenvolve Os Mais Vendidos na Amazon em Computadores e Informática: https://amzn.to/3nWnCbr Mais Vendidos em Games e Consoles: https://amzn.to/3ufq8ed Mais Vendidos em Dispositivos Amazon e Acessórios: https://amzn.to/3EEfulQ Mais Vendidos em Apps e Jogos: https://amzn.to/39whbU9 Notebook: https://amzn.to/3EJk5TK Pcs: https://amzn.to/3zrgaas 🎵 Música: Large Smile Mood - Nico Staf ✨IDE: ( Integrated Development Environment )Microsoft Visual Studio. ✨IDE: ( Integrated Development Environment ) Visual Studio Code. EXTENSÕES VISUAL STUDIO CODE: LIVE SERVER: Carrega a página automaticamente. BEAUTIFY : Padroniza a formatação do código COLOR HIGHLIGHT : Mostra as cores que você está criando no arquivo css. INTELLISENSE FOR CSS: Fornece o auto completo da classe que você escreveu no seu código. ✨Software Editor de videos: Shotcut. ✨Software para gravar a tela do computador: OBS Studio. Google Fontes: https://fonts.google.com/ ⭐ Biblioteca JavaScript https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js Fontes de ícones 🔎https://fontawesome.com/v5.15/icons?d=gallery&p=2 🔎https://fontawesome.com/ Ambiente de Desenvolvimento: codepen.io HTML E CSS: 🔎https://www.w3schools.com/default.asp Site de verificação de erro: 🔎https://validator.w3.org/ Tabelas de cores: 🔎https://www.flextool.com.br/tabela_cores.html Imagem para baixar: 🔎https://pixabay.com/pt/ Site para criar Thumbnails: 🔎https://www.canva.com/