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

css水波浪动画效果

news 2026/4/9 13:30:09

为缩小gif大小，动画效果做了加速，效果如下：

<!DOCTYPE html>
<html>
<head>
<style>
*{padding:0;margin:0;}/*清除默认填充及边距*/.water{position:relative;width:100vw;height:100vh;overflow:hidden;background:#cdfffc;}
.water:before,.water:after{content:"";position:absolute;left:50%;width:200vw;height:200vw;top:-158vw;margin-left:-100vw;background:linear-gradient(to right,rgba(1,174,255,1),rgba(11,5,255,1));border-radius:42%;animation:rotate 20s linear infinite;z-index:1;}
.water:after{border-radius:40%;background:linear-gradient(to right,rgba(11,5,255,0.5),rgba(1,174,255,0.5));animation:rotate 24s linear -10s infinite;z-index:2;}@keyframes rotate {
50%{transform:rotate(180deg);}
100%{transform:rotate(360deg);}
}.water .millia{position:relative;z-index:3;background:#fff;width:96vw;margin:1vh auto 0 auto;text-align:center;border-radius:1vh;}
</style>
</head>
<body><!--if--使用-->
<div class="water"></div><!--else--做背景图使用-->
<div class="water">
<div class="millia"><br><br><br>如<br>果<br>做<br>背<br>景<br>图<br>使<br>用<br><br><br><br></div>
</div>
</body>
</html>

 说明：

采用vw和vh单位可适配移动和pc，调整top的值可以改变高度

.water:before,.water:after设置width、height、border-radius、top、background等以改变效果

相关文章：

css水波浪动画效果

为缩小gif大小&#xff0c;动画效果做了加速&#xff0c;效果如下&#xff1a; <!DOCTYPE html> <html> <head> <style> *{padding:0;margin:0;}/*清除默认填充及边距*/.water{position:relative;width:100vw;height:100vh;overflow:hidden;background…...

编程日记 2024/8/7 11:26:25

SQL二次注入

目录 1.什么是二次注入&#xff1f; 2.二次注入过程 2.1寻找注入点 2.2注册admin#用户 2.3修改密码 1.什么是二次注入&#xff1f; 当用户提交的恶意数据被存入数据库后&#xff0c;因为被过滤函数过滤掉了&#xff0c;所以无法生效&#xff0c;但应用程序在从数据库中拿…...

编程日记 2024/8/7 11:25:24

深入学习小程序开发第二天：数据绑定与动态更新

一、概念 在小程序中，数据绑定是指将页面的数据和视图进行关联，使得数据的变化能够自动反映在视图上，而不需要手动操作DOM。这种绑定是双向的，即数据改变时视图更新，视图操作（如用户输入）也能改变数据。 二、用法 1.单向数据绑定与双向数据绑定： 在小程序中，数据绑定…...

编程日记 2024/8/7 11:23:22

【ai】 时间序列分析的python例子

时间序列分析 :分析和理解随时间变化的数据序列 在gcc的趋势滤波后，需要对排队延迟梯度进行检测及调整，参考的是一个阈值， 调整阈值时就使用了时间序列分析技术： 时间序列分析是统计学和数据分析中的一种技术，用于分析和理解随时间变化的数据序列。时间序列数据具有时间上…...

编程日记 2024/8/7 11:22:20

生成订单幂等性（防止订单重复提交）

订单唯一性(防止重复下单)方案 重复下单产生原因&#xff1a; 客户端原因&#xff1a; 比如下单的按键在点按之后&#xff0c;在没有收到服务器请求之前&#xff0c;按键的状态没有设为已禁用状态&#xff0c;还可以被按。又或者&#xff0c;在触摸屏下&#xff0c;用户手指…...

编程日记 2024/8/7 11:21:19

IDEA自定义注释模版

1.类&#xff08;接口/枚举等同理&#xff09; 2.方法模版 先自定义一个模版组&#xff0c;然后在里面添加模版名&#xff0c;触发快捷键&#xff08;Tab/Enter&#xff09;&#xff0c;模版描述&#xff0c;哪些语言中应用 模版中的自定义参数params和returns可以自动展开参数…...

编程日记 2024/8/7 11:19:15

Spring Cloud Gateway实现API访问频率限制

Spring Cloud Gateway实现API访问频率限制 一、为什么需要访问频率限制&#xff1f;二、使用全局过滤器实现访问频率限制步骤&#xff1a;示例代码&#xff1a; 三、使用特定路由的过滤器实现访问频率限制步骤&#xff1a;示例代码&#xff1a; 四、总结 在微服务架构中&#x…...

编程日记 2024/8/7 11:14:09

单例模式：确保唯一实例的设计模式

前言 在学习框架和大型项目开发时&#xff0c;我们常常会遇到“单例模式”这个词。虽然它时常被提及&#xff0c;但往往没有详细讲解。为了搞懂单例模式的真正意义以及它在开发中的应用&#xff0c;我查阅了一些资料并总结了这篇博客。希望通过这篇文章&#xff0c;能够帮助大…...

编程日记 2024/8/7 11:12:06

MCU调试技巧-串口打印

1. 软件仿真printf 条件&#xff1a;MDK 效果&#xff1a;在软件仿真模式下&#xff0c;调试页面的串口终端中可以看到串口打印 教程&#xff1a;https://blog.csdn.net/ybhuangfugui/article/details/94378195 2. 串口重定向printf 条件&#xff1a;物理串口接线 效果&…...

编程日记 2024/8/7 11:11:05

VS+Qt+C++点云PCL三维显示编辑系统

程序示例精选 VSQtC点云PCL三维显示编辑系统 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《VSQtC点云PCL三维显示编辑系统》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易…...

编程日记 2024/8/7 11:10:03

代码随想录算法训练营第七天（一）| 454.四数相加II 383. 赎金信

454.四数相加II 题目&#xff1a; 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&#xff1…...

编程日记 2024/8/7 11:07:59

SpringBoot+Mybatis 分页

无论多数据源,还是单数据源,分页都一样,刚开始出了点错,是因为PageHelper的版本问题 这里用的SpringBoot3 SpringBoot2应该是没有问题的 相关代码 dynamic-datasourceMybatis多数据源使用-CSDN博客 依赖 <?xml version"1.0" encoding"UTF-8"?&g…...

编程日记 2024/8/7 11:06:57

学习进行到了第十七天（2024.8.5）

1.Mybatis的定义 数据持久化是将内存中的数据模型转换为存储模型&#xff0c;以及将存储模型转换为内存中数据模型的统称。例如&#xff0c;文件的存储、数据的读取以及对数据表的增删改查等都是数据持久化操作。MyBatis 支持定制化 SQL、存储过程以及高级映射&#xff0c;可以…...

编程日记 2024/8/7 11:05:56

【Nuxt】Layout 布局和渲染模式

NuxtLayout app.vue <NuxtLayout><NuxtPage/></NuxtLayout>然后默认的布局 需要 写在 ~/layouts/default.vue 下面&#xff0c;其他自定义的布局也在写在 layouts 目录下。 default.vue <template><div class"app-container"><d…...

编程日记 2024/8/7 11:02:51

C:指针学习（1）-学习笔记

目录 前言&#xff1a; 知识回顾&#xff1a; 1、const 1.1 const修饰普通变量 1.2 const修饰指针变量 1.3 总结&#xff1a; 2、指针运算 2.1 指针-整数 2.2 指针-指针 2.3 指针的关系运算 3、指针的使用 结语&#xff1a; 前言&#xff1a; 距离上一次更新关于初…...

编程日记 2024/8/7 11:00:48

【LVS】负载均衡之NAT模式

一、LVS概念 LVS&#xff08;Linux Virtual Server&#xff09;是一个基于Linux操作系统的虚拟服务器技术&#xff0c;用于实现负载均衡和高可用性。LVS通过将客户端的请求分发到多台后端服务器上&#xff0c;从而提高整体服务的处理能力和可靠性。 二、LVS优势 高性能&…...

编程日记 2024/8/7 10:59:46

ASP.NET Core 基础 - 入门实例

一. 下载 1. 下载vs2022 Visual Studio 2022 IDE - 适用于软件开发人员的编程工具 (microsoft.com) 学生,个人开发者选择社区版就行,免费的. 安装程序一直下一步下一步就行,别忘了选择安装位置,如果都放在C盘的话,就太大了. 2. 选择工作负荷 准备工作完成 二. 创建新项目 三…...

编程日记 2024/8/7 10:58:44

机器人主板维修｜ABB机械手主板元器件故障

【ABB机器人电路板故障原因诊断】 针对上述故障现象&#xff0c;我们需要对ABB机器人IO板进行详细的故障诊断。以下是一些可能的故障原因&#xff1a; 1. 元器件老化或损坏&#xff1a;ABB机械手安全面板上的元器件在长期使用过程中可能出现老化、损坏或接触不良等问题&#xf…...

编程日记 2024/8/7 10:57:43

大数据Flink（一百零六）：什么是阿里云实时计算Flink版

文章目录 什么是阿里云实时计算Flink版 一、产品概述 二、产品架构 三、产品优势 什么是阿里云实时计算Flink版 阿里云实时计算Flink版是一套基于Apache Flink构建的⼀站式实时大数据分析平台&#xff0c;提供端到端亚秒级实时数据分析能力&#xff0c;并通过标准SQL降低业…...

编程日记 2024/8/7 10:55:40

ERCOT中的专业术语解释

在ERCOT中&#xff0c;ECRSM 代表的是 “Emergency Contingency Resource Supplementary Market”。这个术语涉及到紧急备用资源市场&#xff0c;用于应对电力需求或供应的紧急情况。在ERCOT电网中&#xff0c;当系统面临极端情况或资源不足时&#xff0c;ECRSM 可以帮助确保电…...

编程日记 2024/8/7 10:52:35

2025届毕业生推荐的六大AI辅助写作平台实际效果

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 作为人工智能技术重要应用的AI写作工具&#xff0c;正逐渐改变内容创作模式&#xff0c;此类…...

编程新知 2026/4/9 13:27:35

轻量级跨平台安卓应用安装解决方案：APK-Installer高效实施指南

轻量级跨平台安卓应用安装解决方案&#xff1a;APK-Installer高效实施指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 在Windows环境中运行安卓应用长期面临资源占…...

编程新知 2026/4/9 13:13:21

MySQL8.0大小写敏感坑爹实录：lower_case_table_names从报错到解决的完整过程

MySQL 8.0大小写敏感参数避坑指南&#xff1a;从报错到根治的深度实践 最近在迁移开发环境到Docker时&#xff0c;遇到了一个令人头疼的问题——MySQL 8.0服务无法启动&#xff0c;报错提示Different lower_case_table_names settings for server (2) and data dictionary (0)。…...

编程新知 2026/4/9 11:03:07

Testsigma自动化测试平台深度解析：AI协同测试架构设计与实践指南

Testsigma自动化测试平台深度解析&#xff1a;AI协同测试架构设计与实践指南 【免费下载链接】testsigma Testsigma is an agentic test automation platform powered by AI-coworkers that work alongside QA teams to simplify testing, accelerate releases and improve qua…...

编程新知 2026/4/9 10:57:04

OpenClaw多模态编程：用Phi-3-vision-128k-instruct开发视觉脚本

OpenClaw多模态编程&#xff1a;用Phi-3-vision-128k-instruct开发视觉脚本 1. 为什么我们需要视觉脚本&#xff1f; 去年夏天&#xff0c;我接手了一个自动化测试项目&#xff0c;需要每天重复操作几十次相同的GUI流程。传统RPA工具在面对动态界面时频繁失效——按钮位置偏移…...

编程新知 2026/4/9 10:51:01

5分钟掌握Switch破解神器TegraRcmGUI：新手也能轻松上手的图形化注入教程

5分钟掌握Switch破解神器TegraRcmGUI&#xff1a;新手也能轻松上手的图形化注入教程 【免费下载链接】TegraRcmGUI C GUI for TegraRcmSmash (Fuse Gele exploit for Nintendo Switch) 项目地址: https://gitcode.com/gh_mirrors/te/TegraRcmGUI 还在为Switch破解的复杂…...

编程新知 2026/4/9 10:21:45

如何免费获取网盘直链：8大平台下载速度提升5倍的终极指南

如何免费获取网盘直链&#xff1a;8大平台下载速度提升5倍的终极指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天…...

编程新知 2026/4/9 9:57:03

OpenClaw 微信通道配置与部署速查

一、前置核查&#xff08;必做&#xff09;版本适配微信&#xff1a;iOS≥8.0.70、安卓≥8.0.69&#xff0c;未达标则更新至最新版。OpenClaw&#xff1a;需为最新稳定版&#xff0c;执行openclaw --version验证&#xff0c;异常则重新获取部署包。环境与权限网络&#xff1a;开…...

编程新知 2026/4/9 8:27:58

Qwen3-ForcedAligner-0.6B真实效果：实时录音场景下口音适应与断句准确性展示

Qwen3-ForcedAligner-0.6B真实效果&#xff1a;实时录音场景下口音适应与断句准确性展示 1. 项目概述 Qwen3-ForcedAligner-0.6B是阿里巴巴基于Qwen3-ASR-1.7B和ForcedAligner-0.6B双模型架构开发的本地智能语音转录工具。这个工具最大的特点是能够在完全离线的环境下&#x…...

编程新知 2026/4/9 8:27:58

收藏必备！小白入门：详解开源网络入侵检测系统（Suricata、Snort、Zeek_Bro、Security Onion）

收藏必备&#xff01;小白程序员入门&#xff1a;详解开源网络入侵检测系统&#xff08;Suricata、Snort、Zeek/Bro、Security Onion&#xff09; 本文介绍了网络入侵检测系统&#xff08;NIDS&#xff09;和主机入侵检测系统&#xff08;HIDS&#xff09;的概念&#xff0c;重…...

编程新知 2026/4/9 8:11:51