canvas水波纹效果,jquery鼠标水波纹插件

canvas水波纹效果,jquery鼠标水波纹插件

效果展示
水波纹效果

jQuery水波纹效果,canvas水波纹插件

HTML代码片段

<div class="scroll04wrap"><h3>发展历程</h3><div class="scroll04"><p>不要回头,一直向前</p></div>
</div>

css代码片段

/* scroll04 */
.scroll04wrap{width: 100%;position: relative;margin-top: 100px;}
.scroll04wrap h3{font-size: 50px;color: #2e5c72;margin-bottom: 30px;line-height: 86px;font-weight: bold;text-align: center;}
.scroll04{width: 100%;position: relative;box-sizing: border-box;padding: 250px 0;background:url(images/qyqxbg02.jpg) no-repeat fixed;background-size: cover;display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;}
.scroll04 p{font-size: 28px;color: #fff;writing-mode: vertical-lr;font-family: cursive;font-weight: bold;letter-spacing: 5px;}

js代码片段
注:需引入 jquery.js 插件和 ripples.js 插件

<script src="js/ripples.js"></script>
<script>$(document).ready(function() {try {$('.scroll04').ripples({resolution: 512,dropRadius: 20, //pxperturbance: 0.04,});}catch (e) {$('.error').show().text(e);}});
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/697790.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端工程Bem架构及其封装

文章目录 简介语法在vue3项目中引用sass创建bem.scss文件修改vite.config.tsvue文件中使用结果 这是我学习记录的笔记&#xff0c;如有不正&#xff0c;欢迎补充 简介 首先认识一下什么是bem架构&#xff1f;BEM的意思就是块&#xff08;block&#xff09;、元素&#xff08;e…

【DDD】学习笔记-发布者—订阅者模式

在领域设计模型中引入了领域事件&#xff0c;并不意味着就采用了领域事件建模范式&#xff0c;此时的领域事件仅仅作为一种架构或设计模式而已&#xff0c;属于领域设计模型的设计要素。在领域设计建模阶段&#xff0c;如何选择和设计领域事件&#xff0c;存在不同的模式&#…

nginx-ingress-controller组件中Nginx的版本升级

参考链接&#xff1a;https://blog.csdn.net/qq_22824481/article/details/133761302 https://blog.csdn.net/mengfanshaoxia/article/details/127155020 https://blog.csdn.net/weixin_39961559/article/details/87935873 概要 业务区k…

JAVAEE初阶 JVM(一)

JVM的热门话题 一. JVM中的内存区域划分1.经典笔试题. 二. JVM的类加载机制 一. JVM中的内存区域划分 1.经典笔试题. 二. JVM的类加载机制

wondows10用Electron打包threejs的项目记录

背景 电脑是用的mac&#xff0c;安装了parallels desktop ,想用electron 想同时打包出 苹果版本和windows版本。因为是在虚拟机里安装&#xff0c;它常被我重装&#xff0c;所以记录一下打包的整个过程。另外就是node生态太活跃&#xff0c;几个依赖没记录具体版本&#xff0…

lora网关智慧工厂三色灯安灯状态采集钡铼技术S281

LoRa网关结合钡铼技术S281模块在智慧工厂三色灯安灯状态采集方面具有广泛的应用前景。智慧工厂的安全生产管理对于企业生产经营至关重要&#xff0c;而三色灯安灯是工厂安全生产管理的重要指示灯&#xff0c;通过LoRa无线通信技术和钡铼技术S281模块&#xff0c;可以实现对三色…

android 使用X264编码视频

android 使用X264编码视频 源码刚上传可能审核 源码下载地址 X264对应部分API介绍 初始化x264_param_t _x264_param new x264_param_t;/*** preset是编码速度* 可选项"ultrafast", "superfast", "veryfast", "faster", "fa…

使用 package.json 配置代理解决 React 项目中的跨域请求问题

使用 package.json 配置代理解决 React 项目中的跨域请求问题 当我们在开发前端应用时&#xff0c;经常会遇到跨域请求的问题。为了解决这个问题&#xff0c;我们可以通过配置代理来实现在开发环境中向后端服务器发送请求。 在 React 项目中&#xff0c;我们可以使用 package…

MES系统中的手动排产和自动排产-助力生产效率

企业在排产管理中面临的问题&#xff1a; 大多数的企业在调度排产过程中&#xff0c;都会遇到以下问题。首先是插单非常的多&#xff0c;计划调整困难&#xff0c;会经常性的发生原材料、零部件的备货不足。计划按MRP或库存展示计算出需求后将产生大量工单&#xff0c;这些工单…

《剑指Offer》笔记题解思路技巧优化_Part_6

《剑指Offer》笔记&题解&思路&技巧&优化_Part_6 &#x1f60d;&#x1f60d;&#x1f60d; 相知&#x1f64c;&#x1f64c;&#x1f64c; 相识&#x1f622;&#x1f622;&#x1f622; 开始刷题&#x1f7e1;1.LCR 168. 丑数—— 丑数&#x1f7e2;2. LCR 16…

Kubernetes服务网络Ingress网络模型分析、安装和高级用法

文章目录 1、Ingres简介2、Ingres网络模型分析3、安装Ingress4、使用4.1、搭建测试环境4.2、域名访问4.3、路径重写&#xff08;高级用法&#xff09;4.4、流量限制&#xff08;高级用法&#xff09; 5、总结 1、Ingres简介 Ingress翻译过来是“入口”的意思&#xff0c;也就是…

切换分支时候IDEA提示:workspace associated with branch feature has been restored

切换分支时候IDEA提示&#xff1a;workspace associated with branch feature has been restored 这个消息是指与"feature"分支关联的工作区已经恢复。在Git中&#xff0c;工作区是指你当前正在进行修改和编辑的文件和目录。当你切换分支时&#xff0c;Git会自动将工…

配置docker 支持GPU方法(Nvidia GPU)

参考官方文档&#xff1a; https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/latest/install-guide.html 系统版本&#xff1a;ubuntu 23.04 执行脚本如下&#xff1a; 1.Configure the production repository: curl -fsSL https://nvidia.github.io/lib…

怎么把试卷图片转换成word?这4种方法一看就会

怎么把试卷图片转换成word&#xff1f;在数字化日益盛行的今天&#xff0c;我们常常会面临将纸质试卷或图片中的试卷内容转化为Word文档的需求。无论是为了对试卷内容进行编辑、修改&#xff0c;还是为了在线共享、远程教学&#xff0c;将图片转换为Word文档都成为了至关重要的…

集成TinyMCE富文本编辑器

若依的基础上集成TinyMCE富文本编辑器 前端bootstrap TinyMCE官网链接 TinyMCE所需静态资源下载链接 开源项目-若依链接 将TinyMCE静态资源包放入项目中&#xff1b; 代码引入css&#xff1a; <!-- 引入TinyMCE CSS --><link th:href"{/ajax/libs/tinymce/j…

金田金業: 美联储泡沫正在破裂! 崩溃对黄金非常有利

The Great Recession Blog作者大卫哈吉斯表示&#xff0c;美联储一直以来都将继续收紧货币政策&#xff0c;直到出现问题&#xff0c;但市场现在已经陷入泡沫。 他指出&#xff0c;泡沫正在破裂&#xff0c;崩溃最终将对黄金非常有利。 正当投资者聚焦美联储何时会降息&#xf…

Springboot 使用升级小记-循环依赖

springboot 使用已经非常广泛了&#xff0c;它的版本迭代速度也比较快&#xff0c;过一段时间版本差异就会比较大。 由于低版本依赖的 spring 版本有漏洞问题&#xff0c;这次我们是从 2.2.6 版本直接升级到 2.7.16&#xff0c;升级 3.0 的话担心差异更大。 这时直接修改依赖…

Jmeter 学习目录(0)

Jmeter 所有内容均以学习为主输出内容&#xff0c;按照最小单位和基础进行输出。 如果有看不懂&#xff0c;或者有不明确的内容&#xff0c;欢迎大家留言说明。 Mac Jmeter下载安装启动(1) Jmeter 目录介绍(2) Jmeter基础发起一次请求(3)

代码随想录三刷day07

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣206. 反转链表二、力扣24. 两两交换链表中的节点 前言 递归写法和双指针法实质上都是从前往后翻转指针指向&#xff0c;其实还有另外一种与双指针法不同…

SD-WAN:快速改造升级企业原有网络架构

随着企业信息化的推进&#xff0c;传统网络架构已难以满足企业日益复杂和多样化的组网互联需求。企业在不断提高对网络的要求&#xff0c;包括各办公点的互联数据传输、资源共享、视频会议、ERP、OA、邮箱系统、云服务等应用需求&#xff0c;以及对网络运维工作的简化和降低难度…