Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - 💥Como Fazer Efeito de flutuação | Html e css

#LayoutResponsive #FrontEnd #Css3 #Html5 📚 Muito Obrigado por Assistir! 📌Saiba Mais https://www.youtube.com/c/WebOnlineDesenvolve 📌 https://github.com/WebOnlineDesenvolve Nesse vídeo vamos fazer um objeto flutuar com animação. No cabeçalho do html vamos colocar um link para o conteúdo do estilo, logo depois vamos fazer o nosso corpo do html vamos colocar uma div container para todo conteúdo e dentro uma tag img com tamanho e altura. No style.css que é o estilo da página vamos setar os valores de espaçamentos com uma margin, padding e um box sizing border box. Dentro do corpo uma background color com posição e tamanho. No container vamos posicionar os elementos no meio da página com position, top, left e o transform translate. Na tag img colocamos uma animação, com o animation - name, animation-iteration-count infinite animation-duration: 10s; no @keyframes uma animação de 0% a 100% com um transform translate y negativo. |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 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 |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TELA FINAL DO VÍDEO: Saiba Mais: Canal do Savio Ferraz - Animações feitas por @Savio Ferraz |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| ✨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 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/