CSS进入屏幕后执行,是指当一个元素进入浏览器可视窗口后,会触发特定的事件或样式效果。这些效果可以通过CSS的伪类和js的事件监听来实现。
/*CSS伪类*/ /*当元素完全进入浏览器可视窗口后执行*/ .your-class:in-view{ animation: your-animation 1s ease-in-out; } /*当元素部分进入浏览器可视窗口后执行*/ .your-class:in-partial-view{ opacity: 0.5; } /*JS事件监听*/ /*当元素进入浏览器可视窗口后执行*/ window.addEventListener('scroll', function(){ var elem = document.querySelector('.your-class'); var position = elem.getBoundingClientRect(); if(position.top >= 0 && position.left >= 0 && position.bottom<= window.innerHeight && position.right<= window.innerWidth){ //执行你的代码 } }); /*当元素完全进入浏览器可视窗口后执行*/ window.addEventListener('scroll', function(){ var elem = document.querySelector('.your-class'); var position = elem.getBoundingClientRect(); if(position.top >= 0 && position.left >= 0 && position.bottom<= window.innerHeight && position.right<= window.innerWidth && position.bottom >0 && position.top< window.innerHeight){ //执行你的代码 } });
以上代码实现了当元素进入浏览器可视窗口后执行CSS动画或改变元素不透明度的效果。同时,通过js监听浏览器滚动事件,实现了元素进入屏幕后执行自定义代码的效果。