当前位置：首页 > article >正文

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

article 2025/3/21 10:47:18

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

缘
创作背景
html结构
css样式
完整代码
- 基础版
- 进阶版(无限往复加载)
效果图

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

缘

创作随缘，不定时更新。

创作背景

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

html结构


	<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样式

.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; }

完整代码

基础版

<!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>

进阶版(无限往复加载)

<!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>