//border3 var revealThree = document.querySelectorAll('.BorderThree'); for(var i = 0; i < revealThree.length; i++){ var windowheight = window.innerHeight; var revealtop = revealThree[i].getBoundingClientRect().top; var revealpoint = 50; if(revealtop < windowheight - revealpoint){ revealThree[i].classList.add('active'); } else{ revealThree[i].classList.remove('active'); } }

Intenté crear un borde, pero cuando agregué una función js, el color de fondo del borde de repente se volvió gris cuando solo debería ser un borde.

Aquí está el código para CSS:

 .BorderThree{ width: 300px; height: 450px; position: absolute; top: 900px; border-style: solid; border-color: azure; left: 900px; transform: translateY(150px); opacity: 0; transition: all 2s ease; } .BorderThree.active{ transform: translateY(0px); opacity: 1; color: #000; }

y cuando traté de ajustar la opacidad, todo el borde se ve afectado. Agradecería su ayuda, gracias.