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

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

article 2026/3/5 18:58:50

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

效果图

在这里插入图片描述

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

【css酷炫效果】纯CSS实现瀑布流加载动画缘创作背景html结构css样式完整代码基础版进阶版(无限往复加载) 效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492012 缘创作随缘，不定时更新。创作…...

编程日记 2026/2/25 9:41:28

咖啡点单小程序毕业设计（JAVA+SpringBoot+微信小程序+完整源码+论文）

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取项目下载方式🍅 一、项目背景介绍： 随着社会的快速发展和…...

编程日记 2026/2/17 6:01:03

网络编程套接字【端口号/TCPUDP/网络字节序/socket编程接口/UDPTCP网络实验】

网络编程套接字 0. 前言1. 认识端口号2. 认识TCP和UDP协议3. 网络字节序4. socket编程接口5. 实现一个简单的UDP网络程序5.1 需求分析5.2 头文件准备5.3 服务器端设计5.4 客户端设计5.5 本地测试5.6 跨网络测试5.7 UDP小应用——客户端输入命令，服务器端执行 6. 地址…...

编程日记 2026/2/23 7:45:18

【c++】内存序和内存一致性模型

c 11 中为了支持并发，定义了内存序和内存一致性模型。这个概念听起来非常高深，好像是在多线程编程领域浸淫多年之后的神级程序员才能搞明白，并用明白的东西。本文尝试用最简单的方式说清楚这个概念。因为这个概念真的超级简单，大…...

编程日记 2026/2/11 13:33:36

7-字符串

1-ASCII 0-9 对应 48-57 A-Z 对应 65-90 a-z 对应 97-122 2-字符数组字符变量存储单个字符字符数组存储多个字符字符串就是字符数组加上结束符 ’ \0 ’ #include <iostream> using namespace std; int main(){//是字符数组，不是字符串char a1[]{C,,};…...

编程日记 2026/2/18 2:03:00

DeepSeek 3FS 与 JuiceFS：架构与特性比较

近期，DeepSeek 开源了其文件系统 Fire-Flyer File System (3FS)，使得文件系统这一有着 70 多年历时的“古老”的技术，又获得了各方的关注。在 AI 业务中，企业需要处理大量的文本、图像、视频等非结构化数据，还需要应对…...

编程日记 2026/2/14 18:34:10

数据结构 -- 二叉树的存储结构

二叉树的存储结构顺序存储 #define MaxSize 100 struct TreeNode{ElemType value; //结点中的数据元素bool isEmpty; //结点元素是否为空 };//定义一个长度为MaxSize的数组t，按照从上至下、从左至右的顺序依次完成存储完全二叉树中的各个节点 TreeNode t[MaxSi…...

编程日记 2026/2/21 16:29:18

Unity WebGL项目访问时自动全屏

Unity WebGL项目访问时自动全屏打开TemplateData/style.css文件在文件最下方添加红色框内的两行代码使用vscode或者其他编辑器打开index.html 将按钮注释掉，并且更改为默认全屏...

编程日记 2026/2/23 17:27:28

vue computed 计算属性简述

Vue 的 ‌计算属性（Computed Properties）‌ 是 Vue 实例中一种特殊的属性，用于‌声明式地定义依赖其他数据动态计算得出的值‌。它的核心优势在于能够自动追踪依赖关系，并缓存计算结果，避免重复计算，提升性…...

编程日记 2026/2/19 23:42:30

破局者登场：中国首款AI原生IDE Trae深度解析--开启人机协同编程新纪元

摘要字节跳动于2025年3月3日正式发布中国首款AI原生集成开发环境Trae国内版，以动态协作、全场景AI赋能及本土化适配为核心优势。Trae内置Doubao-1.5-pro与DeepSeek R1/V3双引擎，支持基于自然语言生成端到端代码框架、实时上下文感知与智能Bug修复&…...

编程日记 2026/2/21 16:29:41

如何通过Python的`requests`库接入DeepSeek智能API

本文将详细介绍如何通过Python的requests库接入DeepSeek智能API，实现数据交互与智能对话功能。文章涵盖环境配置、API调用、参数解析、错误处理等全流程内容，并提供完整代码示例。一、环境准备与API密钥获取 1. 注册DeepSeek账号访问DeepSeek官网&am…...

编程日记 2026/1/25 6:29:51

【C++】std::make_shared 详解

std::make_shared 详解 1. std::make_shared 简介 std::make_shared 是 C11 标准引入的一个函数模板，用于创建 std::shared_ptr 对象，并高效地分配和管理对象的内存。它比直接使用 std::shared_ptr 构造函数 std::shared_ptr<T>(new T(...)) 具有…...

编程日记 2026/2/19 22:10:35

Ubuntu22.04版本编译安装 Redis Redis version7.4.2 #解压源码包 tar -zxvf redis-stable.tar.gz cd redis-stable/ make make install安装好了后，可执行文件默认会放入/usr/local/bin/ rootluobozi:~ ls /usr/local/bin/* /usr/local/bin/redis-cli /usr/local/…...

编程日记 2026/2/26 4:24:16

ClickHouse Docker 容器迁移指南：从测试环境到离线正式环境

ClickHouse Docker 容器迁移指南：从测试环境到离线正式环境在实际开发和运维过程中，我们经常需要将测试环境中的服务迁移到正式环境，尤其是当正式环境处于离线状态时，这种迁移会变得更加复杂。本文将详细介绍如何将运行在 Docke…...

编程日记 2026/2/20 17:05:25

C# WPF编程-Menu

C# WPF编程-Menu 布局：代码：效果在WPF（Windows Presentation Foundation）中，Menu控件用于创建下拉菜单或上下文菜单，它提供了丰富的定制选项来满足不同的应用需求。下面将介绍如何在WPF应用程序中使用Menu…...

编程日记 2026/2/24 2:06:57

利用Python爬虫获取Shopee（虾皮）商品详情：实战指南

在跨境电商领域，Shopee（虾皮）作为东南亚及台湾地区领先的电商平台，拥有海量的商品信息。无论是进行市场调研、数据分析，还是寻找热门商品，获取Shopee商品详情都是一项极具价值的任务。然而，手动…...

编程日记 2026/2/19 15:01:59

Docker和containerd之概览（Overview of Docker and Containerd）

Docker和containerd之概览容器本质上就是一个进程。 Namespace是一种逻辑分组机制，允许您将集群资源划分为独立的虚拟环境。每个 Namespace 为资源提供了一个范围，使得不同的团队、应用程序或环境可以在同一集群中共存，而不会相互干扰。 C…...

编程日记 2026/3/2 4:56:51

【愚公系列】《高效使用DeepSeek》015-文献摘要生成

🌟【技术大咖愚公搬代码：全栈专家的成长之路，你关注的宝藏博主在这里！】🌟 📣开发者圈持续输出高质量干货的"愚公精神"践行者——全网百万开发者都在追更的顶级技术博主！ 👉 江湖人称"愚公搬代码"，用七年如一日的精神深耕技术领域，以"…...

编程日记 2026/2/24 9:48:28

【多线程】线程不安全问题

文章目录多线程不安全的原因大的层面->多线程是随机调度的容易产生死锁小的层面->内存不可见性引入volatile关键字指令重排序不是原子性带来的隐患 synchronized锁的互斥性及作用可重入性——解决死锁 wait()和notify()两个突然迸发出的疑问多线程不安全的原因大的…...

编程日记 2026/3/1 1:13:01

为什么“连接断开可能导致锁未释放”

目录两种典型场景可能导致锁未及时释放1. **数据库未及时检测到连接断开**2. **应用程序未正确处理事务** 为什么说“可能因连接断开导致死锁”？如何避免此类问题？总结在大多数数据库实现中，如果持有锁的连接（或会话&#xff09…...

编程日记 2026/2/24 17:28:09

【C++】树和二叉树的实现（下）

本篇博客给大家带来的是用C语言来实现数据结构树和二叉树的实现！ 🐟🐟文章专栏：数据结构 🚀🚀若有问题评论区下讨论，我会及时回答 ❤❤欢迎大家点赞、收藏、分享！ 今日思想&#xff…...

编程日记 2026/2/26 4:31:06

注入绕过方法

目录 1.绕过特定过滤 1.绕过空格过滤 2.绕过or，and等等过滤 3.绕过‌注释符过滤 4.绕过‌字段过滤 5. 单引号绕过‌ 6. 逗号绕过‌ 7. 等号与运算符绕过‌ 2.绕过过滤方法 ‌1. 大小写统一过滤绕过‌ ‌2. 递归替换规则绕过‌ ‌3. 正则贪婪匹配绕过‌…...

编程日记 2026/2/19 4:46:36

kafka指北

为自己总结一下kafka指北，会持续更新。创作不易，转载请注明出处。目录集群controller选举过程broker启动流程主题创建副本分布ISRleader副本选举机制LEO 生产数据流程同步发送和异步发送分区策略ack应答生产者发送消息的幂等性跨分区幂等性问题&…...

编程日记 2026/2/16 11:37:10

Python基础语法全解析：从入门到实践

Python作为一门简洁高效、功能强大的编程语言，凭借其易读性和丰富的生态系统，已成为编程领域的“明星语言”。本文将系统讲解Python的核心语法，涵盖变量、数据类型、控制结构、函数、模块等核心概念，帮助读者快速掌握编程基础。一…...

编程日记 2026/3/2 12:02:20

7、vue3做了什么

大佬认为有何优点： 组合式api----逻辑集中、对ts有更好的支持RFC–开放了一个讨论机制，可以看到每一个api的提案，方便源码维护，功能扩展，大家一起讨论官方rfc响应式独立，new Proxy，天生自带来…...

编程日记 2026/2/28 1:34:46

OneCyber 平台

OneCyber 平台是一个专注于网络安全和风险管理的综合性解决方案平台。它旨在帮助企业和组织应对日益复杂的网络威胁，提供从威胁检测、风险评估到响应和恢复的全方位服务。以下是关于 OneCyber 平台的一些关键信息： 核心功能威胁检测与分析&#xff…...

编程日记 2026/3/2 16:28:34

基于大语言模型与知识图谱的智能论文生成工具开发构想

基于大语言模型与知识图谱的智能论文生成工具开发构想一、研究背景与意义 1.1 学术写作现状分析 #mermaid-svg-FNVHG5EiEgVSCpHK {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-FNVHG5EiEgVSCpHK .error-icon{fil…...

编程日记 2026/3/4 19:32:36

JUC大揭秘：从ConcurrentHashMap到线程池，玩转Java并发编程！

目录 JUC实现类 ConcurrentHashMap 回顾HashMap ConcurrentHashMap CopyOnWriteArrayList 回顾ArrayList CopyOnWriteArrayList: CopyOnWriteArraySet 辅助类 CountDownLatch 线程池线程池线程池优点 ThreadPoolExecutor 构造器各个参数含义： 线程…...

编程日记 2026/2/25 8:25:29

4.3--入门知识扫盲，IPv4的头部报文解析，数据报分片，地址分类（包你看一遍全部记住）

IPv4协议：网络世界的快递包裹指南（附拆箱说明书） “IPv4就像一张明信片，既要写清楚地址，又要控制大小别超重” —— 某网络工程师的桌面铭牌一、IPv4报头：快递面单的终极艺术 1.1 报头结构图（…...

编程日记 2026/2/27 1:59:40

苍穹外卖-阿里云OSS使用

第一步： package com.sky.properties;import lombok.Data; import org.springframework.boot.context.properties.ConfigurationProperties; import org.springframework.stereotype.Component;Component ConfigurationProperties(prefix "sky.alioss") …...

编程日记 2026/3/4 16:53:53

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

缘

创作背景

html结构

css样式

完整代码

基础版

进阶版(无限往复加载)

效果图

相关文章：