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

效果图

相关推荐
两个西柚呀3 小时前
未在props中声明的属性
前端·javascript·vue.js
子伟-H56 小时前
App开发框架调研对比
前端
桃子不吃李子6 小时前
axios的二次封装
前端·学习·axios
SteveJrong6 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~6 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发6 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii7 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack7 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好7 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O7 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js