css3下拉刷新动画效果 |什么是css3视距

//HTML代码可以先放置一个下拉刷新的容器
下拉刷新

接下来使用CSS3来定义下拉刷新动画的样式。

//首先定义“下拉刷新”文本的样式和位置
#pullRefresh {
position: absolute;
width: 100%;
top: -60px;
text-align: center;
font-size: 14px;
color: #999;
}
#pullRefresh .text {
margin-top: 20px;
}
//定义下拉箭头图标的样式
#pullRefresh .icon {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
background-image: url('arrow.png'); /* 箭头图片 */
background-size: cover;
transform: rotate(-180deg); /* 将箭头旋转180度，使其朝向下方 */
}
//当下拉距离超过60px时出现下拉动画
#pullRefresh.active .icon {
animation: rotate 1s infinite;
}
//定义下拉箭头旋转动画
@keyframes rotate {
from {
transform: rotate(-180deg);
}
to {
transform: rotate(0deg);
}
}

以上代码中，通过定义 #pullRefresh 元素的初始位置，以及定义下拉箭头和下拉文本的样式和位置，实现了下拉刷新效果的基本布局。并通过 CSS3 的 animation 属性和 keyframes 语句，定义了箭头在下拉 60px 后开始旋转的样式表。

当用户下拉到一定高度后，大家需要使用 JavaScript 来控制 #pullRefresh 所在的容器状态，让其处于“active”状态，并给予箭头旋转的动画效果。

//通过JS监听下拉刷新操作，并改变#pullRefresh的状态
var pullRefresh = document.getElementById('pullRefresh');
var startY;
var curY;
document.addEventListener('touchstart', function(e) {
startY = e.touches[0].pageY;
}, false);
document.addEventListener('touchmove', function(e) {
curY = e.touches[0].pageY;
if (curY - startY >60) {
pullRefresh.classList.add('active');
}
}, false);

最后，当下拉刷新结束后，清空 #pullRefresh 元素的“active”状态，并停止箭头的旋转动画。

//当刷新结束后重置#pullRefresh的状态
document.addEventListener('touchend', function() {
if (pullRefresh.classList.contains('active')) {
pullRefresh.classList.remove('active');
pullRefresh.querySelector('.icon').style.animation = 'none';
}
}, false);

通过结合CSS3样式和JavaScript的交互操作，大家实现了一个简单的下拉刷新动画效果。