Home
Imagem-Perfil-Circulo com Efeitos

Efeito de Ruído

Imagem post Ruído Animado

Código HTML Código CSS .ruido { display: block; width: 100vw; height: 100vh; opacity: .17; background-image: url(‘LINK AQUI’); overflow: hidden; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1; mix-blend-mode: plus-lighter; //opcional

Efeito Parallax

Imagem post Efeito Parallax

Código CSS Flutuação selector { animation: flutuacao 12s; animation-iteration-count: infinite; } @keyframes flutuacao { 0% { transform: translatey(20px) rotate(5deg); } 50% { transform: translatey(-10px) rotate(-5deg); } 100% { transform: translatey(20px) rotate(5deg); } }

Slider de Imagens Automático

Imagem post Slider Atuomático de Imagens

Código CSS selector{ –direction: 1; –speed: 50; –image-aspect-ratio: false; –pause-on-hover: true; –pause-on-hover-mobile: false; } selector{ visibility: hidden; overflow: hidden; } selector.showing{ visibility: visible; } selector .e-con, selector .e-container{ -webkit-animation: sliding calc(var(–est-speed,10) * 1s * 50 / var(–speed)) linear infinite; -moz-animation: sliding calc(var(–est-speed,10) * 1s * 50 / var(–speed)) linear infinite; -o-animation: sliding calc(var(–est-speed,10) * 1s […]

Card Mágico

Imagem post Card Mágico

Código CSS Testimonial Carousel selector{ –first-color: #5ddcff; –second-color: #3c67e3; –third-color: #4e00c2; } @property –rotate { syntax: “”; initial-value: 132deg; inherits: false; } selector::before, selector::after{ opacity: 0; content: “”; transition: all 0.5s ease-in-out; } selector:hover::before, selector:hover::after{ position: absolute; z-index: -1; background-image: linear-gradient( var(–rotate) , var(–first-color), var(–second-color) 43%, var(–third-color)); animation: spin 2.5s linear infinite; opacity: 1; } […]

Barra de Rolagem em Textos

Imagem post Barra de Rolagem em Textos

Código CSS Testimonial Carousel selector .swiper-slide[data-swiper-slide-index=”2″] .elementor-testimonial__text{ padding-right:20px; height: 200px; overflow-y: scroll; overflow-x: hidden; } .swiper-slide[data-swiper-slide-index=”2″] .elementor-testimonial__text::-webkit-scrollbar { width: 6px; } .swiper-slide[data-swiper-slide-index=”2″] .elementor-testimonial__text::-webkit-scrollbar-thumb{ background: #616161; border-radius: 40px; } .swiper-slide[data-swiper-slide-index=”2″] .elementor-testimonial__text::-webkit-scrollbar-track { background:#dedede; border-radius: 40px; } CSS Texto Normal selector { height: 128px; overflow-y: scroll; overflow-x: hidden; padding-right: 20px; } .scrollbar::-webkit-scrollbar { width: 6px; } .scrollbar::-webkit-scrollbar-thumb{ […]

Botão Voltar ao Topo

Imagem post Botão Voltar ao Topo

Código JS <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> //You can replace offset value from here var offset = 300 $(window).on(‘load scroll’, function(){ if( $(window).scrollTop() > offset ){ $(‘body’).addClass(‘show’) }else{ $(‘body’).removeClass(‘show’) } }) </script> CSS Botão selector{ opacity: 0; transition: all 0.3s ease-in-out; } body.show selector{ opacity: 1; }

Borda Animada

Imagem post Borda Animada

CSS Borda Animada selector{ –animated-color-1: #c705fd; –animated-color-2: #2716ff; –border-width: 140px; } selector{ height: var(–c-height); } selector:before{ content: “”; position: absolute; inset: -140px var(–border-width); background: linear-gradient(315deg, var(–animated-color-1), var(–animated-color-2)); width: auto; height: auto; transition: all .3s; animation: animate 4s linear infinite; } @keyframes animate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }

Texto Circular

Imagem post Texto Circular

CSS Texto Circular selector { animation: textoanim 20s linear infinite; } @keyframes textoanim { 0% { transform: rotate(0deg) ; } 100% { transform: rotate(360deg); }

Efeito Vidro

Imagem post Efeito Vidro

CSS Efeito vidro selector{ backdrop-filter: blur(5px); } CSS Completo com as Sombras selector{ backdrop-filter: blur(5px); box-shadow: -3px -5px 6px 0px rgba(0, 0, 0, 0.25) inset, 3px 5px 6px 0px rgba(255, 255, 255, 0.05) inset, 0px 24px 32px -8px rgba(0, 0, 0, 0.85); }

Partículas Animadas

Imagem post Partículas

HTML Partículas <style> .particles-js-canvas-el { width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left:0; } </style> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> //JS Code Here </script>

TESTE POPUP

Recupere seu investimento

Depois de passar pelas aulas principais, você estará pronto para conquistar clientes e começar a oferecer serviços. Acredite ou não, com apenas um site, que pode ser criado em cerca de 2 a 3 dias, você já terá a chance de recuperar o investimento feito no curso!