[分享]css3手指滑动特效

CSS3手指滑动特效是一种炫酷的动态效果，通过CSS3技术实现手指滑动的视觉效果，可以使网页更加生动有趣。/ 创建一个触屏滑动的容器 / .container { : relative; overfl...

CSS3手指滑动特效是一种炫酷的动态效果，通过CSS3技术实现手指滑动的视觉效果，可以使网页更加生动有趣。

/* 创建一个触屏滑动的容器 */ 
.container { 
 	position: relative; 
 	overflow: hidden; 
 	width: 100%; 
 	height: 400px; 
 	touch-action: pan-y; 
} 

/* 创建一个滑动的内容 */ 
.content { 
 	position: absolute; 
 	top: 0; 
 	left: 0; 
 	transition: transform 0.3s ease-in-out; 
} 

通过设置容器的touch-action属性为pan-y，可以实现在容器中通过手指上下滑动的操作。而在容器内部，使用CSS3的transition属性来实现内容区域的滑动效果。

/* 绑定触屏事件 */ 
.container:before, 
.container:after { 
 	position: absolute; 
 	content: ''; 
 	top: 0; 
 	width: 100%; 
 	height: 60px; 
 	z-index: 1; /* 遮挡容器滑动 */ 
} 

.container:before { 
 	background: linear-gradient(transparent, rgba(0,0,0,.8)); 
}

.container:after { 
 	bottom: 0; 
 	transform: rotate(180deg); 
 	background: linear-gradient(rgba(0,0,0,.8), transparent); 
} 

var container = document.querySelector('.container'); // 获取容器 
var startX, startY, moveEndX, moveEndY, X, Y; // 定义变量 

container.addEventListener('touchstart', function(e) { 
  // 获取起始坐标 
  startX = e.touches[0].pageX; 
  startY = e.touches[0].pageY; 
}); 

container.addEventListener('touchmove', function(e) { 
  // 阻止默认事件 
  e.preventDefault(); 
  // 获取结束坐标 
  moveEndX = e.changedTouches[0].pageX; 
  moveEndY = e.changedTouches[0].pageY; 
  // 计算滑动距离 
  X = moveEndX - startX; 
  Y = moveEndY - startY; 
  // 判断滑动方向 
  if (Math.abs(X) < Math.abs(Y) && Y > 0) { 
    // 下滑 
    container.querySelector('.content').style.transform = 'translateY(' + Y + 'px)'; 
  } else if (Math.abs(X) < Math.abs(Y) && Y < 0) { 
    // 上滑 
    container.querySelector('.content').style.transform = 'translateY(' + Y + 'px)'; 
  } 
}); 

通过JavaScript绑定容器的touchstart和touchmove事件，可以获取滑动的起始坐标和结束坐标，并计算滑动的距离判断滑动方向。在滑动过程中，重新设置内容区域的transform属性，实现滑动效果。同时，为了遮挡容器滑动的区域，可以创建before和after伪类，设置它们的高度和背景渐变颜色，从而实现更加自然的视觉效果。