下拉刷新是指在移动端或者Web端,当页面到达顶部时,通过下拉页面来更新数据的一种交互方式。在CSS中,可以通过以下步骤来实现下拉刷新:
/* CSS代码 */ .pull-to-refresh { height: 60px; overflow: hidden; position: relative; }.pull-to-refresh .icon { height: 40px; width: 40px; position: absolute; top: 10px; left: 50%; margin-left: -20px; background-image: url('path/to/refresh-icon.png'); }
.pull-to-refresh.active .icon { animation: rotate 1s infinite linear; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
无限滚动是指在移动端或者Web端,当用户滑动到页面底部时,自动加载更多数据的一种交互方式。在CSS中,可以通过以下步骤来实现无限滚动:
/* CSS代码 */ .infinite-scroll { height: 100%; overflow-y: scroll; }.infinite-scroll .loading { margin: 20px auto; text-align: center; }
.infinite-scroll .loading .icon { height: 40px; width: 40px; background-image: url('path/to/loading-icon.png'); animation: rotate 1s infinite linear; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }