【css酷炫效果】纯CSS实现瀑布流加载动画

【css酷炫效果】纯CSS实现瀑布流加载动画

想直接拿走的老板,链接放在这里:https://download.csdn.net/download/u011561335/90492012

创作随缘,不定时更新。

创作背景

刚看到csdn出活动了,赶时间,直接上代码。

html结构

clike 复制代码
	<div class="waterfall">
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
	</div>

css样式

clike 复制代码
.waterfall {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列布局 */
  gap: 15px;
  width: 800px;
  margin: 50px auto;
}

.item {
  background: #f0f0f0;
  border-radius: 8px;
  height: 150px;
  opacity: 0; /* 初始隐藏 */
}
@keyframes waterfall-drop {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.item {
  animation: waterfall-drop 0.6s ease-out forwards;
}
.item:nth-child(4n+1) { animation-delay: 0.1s; }
.item:nth-child(4n+2) { animation-delay: 0.2s; }
.item:nth-child(4n+3) { animation-delay: 0.3s; }
.item:nth-child(4n+4) { animation-delay: 0.4s; }

完整代码

基础版

clike 复制代码
<!DOCTYPE html>
<html lang="en"> 
<head>

<title>页面特效</title>
<style type="text/css">
.waterfall {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列布局 */
  gap: 15px;
  width: 800px;
  margin: 50px auto;
}

.item {
  background: #f0f0f0;
  border-radius: 8px;
  height: 150px;
  opacity: 0; /* 初始隐藏 */
}
@keyframes waterfall-drop {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.item {
  animation: waterfall-drop 0.6s ease-out forwards;
}
.item:nth-child(4n+1) { animation-delay: 0.1s; }
.item:nth-child(4n+2) { animation-delay: 0.2s; }
.item:nth-child(4n+3) { animation-delay: 0.3s; }
.item:nth-child(4n+4) { animation-delay: 0.4s; }
</style>

</head>
<body>

	<div class="waterfall">
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
	</div>

</body>
</html>

进阶版(无限往复加载)

clike 复制代码
<!DOCTYPE html>
<html lang="en"> 
<head>

<title>页面特效</title>
<style type="text/css">
.waterfall {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列布局 */
  gap: 15px;
  width: 800px;
  margin: 50px auto;
}

.item {
  background: #f0f0f0;
  border-radius: 8px;
  height: 150px;
  opacity: 0; /* 初始隐藏 */
}
@keyframes waterfall-drop {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.item {
  animation: waterfall-drop 0.6s ease-out forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.item:nth-child(4n+1) { animation-delay: 0.1s; }
.item:nth-child(4n+2) { animation-delay: 0.2s; }
.item:nth-child(4n+3) { animation-delay: 0.3s; }
.item:nth-child(4n+4) { animation-delay: 0.4s; }
</style>

</head>
<body>

	<div class="waterfall">
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img> 
		<img class="item" src='a.gif' width='200px' height='100px'></img>  
	</div>

</body>
</html>

效果图

相关推荐
知识分享小能手5 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf6 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊6 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel6 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260856 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
ObjectX前端实验室7 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart7 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级7 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang8 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang8 小时前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构