首先先来看看最终展示效果

当鼠标靠近“开始探索”的按钮的时候，按钮放大并有微弱光效

鼠标靠近之前会给视窗添加一层接近背景的朦胧感，当鼠标放在视窗上朦胧感消失

技术不复杂，这个网页主要是使用了以下关键技术：

  • HTML5 语义化标签构建页面结构
  • Tailwind CSS v3 实现响应式设计与样式
  • JavaScript 结合 Canvas API 创建液态动画效果
  • Font Awesome 图标增强视觉表现力

核心样式与配色方案

tailwind.config = {theme: {extend: {colors: {primary: '#3B82F6',   // 主色调-蓝色secondary: '#8B5CF6', // 次色调-紫色accent: '#EC4899',    // 强调色-粉色dark: '#1E293B',      // 深色背景},fontFamily: {inter: ['Inter', 'sans-serif'],},},}
}

自定义工具类与动画效果

接下来是自定义的工具类和动画，这些是实现液态效果的关键：

@layer utilities {.content-auto {content-visibility: auto;}.liquid-blob {filter: url(#liquid);}.text-shadow {text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);}.animate-float {animation: float 6s ease-in-out infinite;}.animate-pulse-slow {animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;}
}@keyframes float {0% { transform: translateY(0px); }50% { transform: translateY(-20px); }100% { transform: translateY(0px); }
}

这里定义了几个关键类：

  • .liquid-blob 使用了我在后面定义的 SVG 滤镜，实现液态模糊效果
  • .animate-float 创建了元素上下浮动的动画效果
  • 还有文本阴影和内容可见性优化等实用工具类

页面结构解析

整个页面分为几个主要部分：

  1. 液态效果容器（背景动画）
  2. 拖尾效果容器（鼠标交互反馈）
  3. 内容区域（包含导航、英雄区、特点展示等）
导航栏设计

导航栏采用了简洁现代的设计，在深色背景上使用渐变文字突出品牌名称：

<nav class="flex justify-between items-center mb-20"><div class="text-2xl font-bold tracking-tight"><span class="text-primary">液态</span><span class="text-secondary">交互</span></div><div class="hidden md:flex space-x-8"><a href="#" class="hover:text-primary transition-colors duration-300">首页</a><a href="#" class="hover:text-primary transition-colors duration-300">作品</a><a href="#" class="hover:text-primary transition-colors duration-300">关于</a><a href="#" class="hover:text-primary transition-colors duration-300">联系</a></div><button class="md:hidden text-2xl"><i class="fa fa-bars"></i></button>
</nav>

为了更好的展示页面的视觉焦点，使用了动态字体大小和渐变按钮：

<section class="text-center mb-24"><h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-6 leading-tight text-shadow">探索<span class="text-primary">液态</span>与<span class="text-secondary">交互</span>的完美融合</h1><p class="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto mb-10">当鼠标划过屏幕，见证流动的视觉盛宴。每一次移动都创造独特的液态轨迹...</p><button class="bg-gradient-to-r from-primary to-secondary px-8 py-3 rounded-full font-medium hover:shadow-lg hover:shadow-primary/20 transition-all duration-300 transform hover:scale-105">开始探索</button>
</section>

注意text-[clamp(2.5rem,5vw,4rem)]这个动态字体大小设置，它会根据视口宽度自动调整标题大小。

液态背景效果实现

现在进入最核心的部分 —— 液态背景效果的实现。这部分使用 Canvas API 创建了流动的液态 blob 效果。

// 液态背景效果
document.addEventListener('DOMContentLoaded', () => {// 创建液态背景const liquidContainer = document.getElementById('liquid-container');const liquidCanvas = document.createElement('canvas');liquidCanvas.id = 'liquid-canvas';liquidCanvas.className = 'absolute inset-0';liquidContainer.appendChild(liquidCanvas);const ctx = liquidCanvas.getContext('2d');// 设置Canvas尺寸function resizeCanvas() {liquidCanvas.width = window.innerWidth;liquidCanvas.height = window.innerHeight;}resizeCanvas();window.addEventListener('resize', resizeCanvas);

首先我们创建了 Canvas 元素并设置其尺寸随窗口大小变化，这是实现响应式液态效果的基础。

接下来是液态 blob 的创建和动画逻辑：

  // 液态效果参数const blobs = [];const blobCount = 8;const colors = ['rgba(59, 130, 246, 0.5)', // primary'rgba(139, 92, 246, 0.5)', // secondary'rgba(236, 72, 153, 0.5)'  // accent];// 创建液滴for (let i = 0; i < blobCount; i++) {blobs.push({x: Math.random() * liquidCanvas.width,y: Math.random() * liquidCanvas.height,radius: 50 + Math.random() * 100,speedX: (Math.random() - 0.5) * 0.5,speedY: (Math.random() - 0.5) * 0.5,color: colors[Math.floor(Math.random() * colors.length)],rotation: Math.random() * Math.PI * 2,rotationSpeed: (Math.random() - 0.5) * 0.01});}

这里我创建了 8 个液态 blob，每个都有随机的位置、大小、移动速度和颜色。注意speedX和speedY使用了(Math.random() - 0.5)来产生正负值，使 blob 可以在两个方向上移动。

动画循环是实现液态效果的核心：

  // 动画循环function animate() {ctx.clearRect(0, 0, liquidCanvas.width, liquidCanvas.height);// 绘制背景渐变const bgGradient = ctx.createLinearGradient(0, 0, liquidCanvas.width, liquidCanvas.height);bgGradient.addColorStop(0, '#1E293B');bgGradient.addColorStop(1, '#0F172A');ctx.fillStyle = bgGradient;ctx.fillRect(0, 0, liquidCanvas.width, liquidCanvas.height);// 绘制所有液滴ctx.save();ctx.filter = 'blur(40px)';blobs.forEach(blob => {// 更新位置和旋转blob.x += blob.speedX;blob.y += blob.speedY;blob.rotation += blob.rotationSpeed;// 边界检查if (blob.x < -blob.radius) blob.x = liquidCanvas.width + blob.radius;if (blob.x > liquidCanvas.width + blob.radius) blob.x = -blob.radius;if (blob.y < -blob.radius) blob.y = liquidCanvas.height + blob.radius;if (blob.y > liquidCanvas.height + blob.radius) blob.y = -blob.radius;// 绘制液滴ctx.beginPath();ctx.fillStyle = blob.color;// 创建一个不规则形状const points = 8;ctx.moveTo(blob.x + blob.radius * Math.cos(blob.rotation),blob.y + blob.radius * Math.sin(blob.rotation));for (let i = 1; i < points; i++) {const angle = blob.rotation + (i * Math.PI * 2) / points;const distance = blob.radius * (0.8 + 0.4 * Math.sin(i * 1.5 + blob.rotation * 0.5));ctx.lineTo(blob.x + distance * Math.cos(angle),blob.y + distance * Math.sin(angle));}ctx.closePath();ctx.fill();});ctx.restore();requestAnimationFrame(animate);}animate();

鼠标拖尾交互效果

接下来是鼠标交互的拖尾效果，这是提升用户体验的关键部分：

  // 鼠标拖尾效果const trailContainer = document.getElementById('trail-container');const trailElements = [];const maxTrailElements = 20;// 创建拖尾元素for (let i = 0; i < maxTrailElements; i++) {const trail = document.createElement('div');trail.className = 'absolute rounded-full liquid-blob';trail.style.width = `${10 + i * 1.5}px`;trail.style.height = `${10 + i * 1.5}px`;trail.style.opacity = '0';trail.style.transition = `opacity 0.5s ease, transform 0.5s ease`;trail.style.transform = 'translate(-50%, -50%) scale(0)';// 随机颜色const color = colors[Math.floor(Math.random() * colors.length)];trail.style.backgroundColor = color.replace('0.5', '0.8');trailContainer.appendChild(trail);trailElements.push(trail);}

这里我们创建了 20 个圆形元素作为拖尾，每个都有不同的大小和随机颜色。通过 CSS 过渡效果实现淡入淡出和缩放动画。

当然大家可以在我代码的基础上进一步优化，比如说，可以调整blobCount参数改变背景中液态 blob 的数量或者修改拖尾元素的数量和动画参数以获得不同的交互效果，当然又或者去扩展颜色数组以添加更多颜色选项。

完整源代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>液态交互效果网页</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><script>tailwind.config = {theme: {extend: {colors: {primary: '#3B82F6',secondary: '#8B5CF6',accent: '#EC4899',dark: '#1E293B',},fontFamily: {inter: ['Inter', 'sans-serif'],},},}}</script><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.liquid-blob {filter: url(#liquid);}.text-shadow {text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);}.animate-float {animation: float 6s ease-in-out infinite;}.animate-pulse-slow {animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;}}@keyframes float {0% { transform: translateY(0px); }50% { transform: translateY(-20px); }100% { transform: translateY(0px); }}</style>
</head>
<body class="font-inter bg-gradient-to-br from-dark to-gray-900 min-h-screen text-white overflow-x-hidden"><!-- 液态效果容器 --><div id="liquid-container" class="fixed inset-0 z-0"></div><!-- 拖尾效果容器 --><div id="trail-container" class="fixed inset-0 pointer-events-none z-10"></div><!-- 内容区域 --><main class="relative z-20 px-6 py-12 max-w-7xl mx-auto"><!-- 导航栏 --><nav class="flex justify-between items-center mb-20"><div class="text-2xl font-bold tracking-tight"><span class="text-primary">液态</span><span class="text-secondary">交互</span></div><div class="hidden md:flex space-x-8"><a href="#" class="hover:text-primary transition-colors duration-300">首页</a><a href="#" class="hover:text-primary transition-colors duration-300">作品</a><a href="#" class="hover:text-primary transition-colors duration-300">关于</a><a href="#" class="hover:text-primary transition-colors duration-300">联系</a></div><button class="md:hidden text-2xl"><i class="fa fa-bars"></i></button></nav><!-- 英雄区域 --><section class="text-center mb-24"><h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-6 leading-tight text-shadow">探索<span class="text-primary">液态</span>与<span class="text-secondary">交互</span>的完美融合</h1><p class="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto mb-10">当鼠标划过屏幕，见证流动的视觉盛宴。每一次移动都创造独特的液态轨迹，感受数字艺术与交互设计的奇妙结合。</p><button class="bg-gradient-to-r from-primary to-secondary px-8 py-3 rounded-full font-medium hover:shadow-lg hover:shadow-primary/20 transition-all duration-300 transform hover:scale-105">开始探索</button></section><!-- 特点展示 --><section class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-24"><div class="bg-gray-800/50 backdrop-blur-md p-8 rounded-2xl border border-gray-700/50 hover:border-primary/30 transition-all duration-300 hover:shadow-xl hover:shadow-primary/5 group"><div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-colors duration-300"><i class="fa fa-tint text-primary text-2xl"></i></div><h3 class="text-xl font-bold mb-3">流畅液态效果</h3><p class="text-gray-400">基于WebGL的高性能液态渲染，实现丝滑流畅的视觉体验。</p></div><div class="bg-gray-800/50 backdrop-blur-md p-8 rounded-2xl border border-gray-700/50 hover:border-secondary/30 transition-all duration-300 hover:shadow-xl hover:shadow-secondary/5 group"><div class="w-16 h-16 bg-secondary/20 rounded-full flex items-center justify-center mb-6 group-hover:bg-secondary/30 transition-colors duration-300"><i class="fa fa-mouse-pointer text-secondary text-2xl"></i></div><h3 class="text-xl font-bold mb-3">鼠标跟随交互</h3><p class="text-gray-400">智能算法分析鼠标轨迹，创造自然而富有创意的拖尾效果。</p></div><div class="bg-gray-800/50 backdrop-blur-md p-8 rounded-2xl border border-gray-700/50 hover:border-accent/30 transition-all duration-300 hover:shadow-xl hover:shadow-accent/5 group"><div class="w-16 h-16 bg-accent/20 rounded-full flex items-center justify-center mb-6 group-hover:bg-accent/30 transition-colors duration-300"><i class="fa fa-paint-brush text-accent text-2xl"></i></div><h3 class="text-xl font-bold mb-3">色彩动态融合</h3><p class="text-gray-400">多种渐变色系随鼠标移动动态混合，创造无限可能的视觉效果。</p></div></section><!-- 示例展示 --><section class="mb-24"><h2 class="text-3xl font-bold mb-12 text-center">互动示例</h2><div class="grid grid-cols-1 md:grid-cols-2 gap-8"><div class="bg-gray-800/30 backdrop-blur-sm rounded-2xl overflow-hidden group"><div class="h-64 relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-primary/30 to-secondary/30"></div><img src="https://picsum.photos/seed/liquid1/800/600" alt="液态交互效果示例" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"></div><div class="p-6"><h3 class="text-xl font-bold mb-2">流体粒子交互</h3><p class="text-gray-400">体验粒子系统如何响应鼠标移动，创造流动的视觉效果。</p></div></div><div class="bg-gray-800/30 backdrop-blur-sm rounded-2xl overflow-hidden group"><div class="h-64 relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-secondary/30 to-accent/30"></div><img src="https://picsum.photos/seed/liquid2/800/600" alt="液态色彩混合示例" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"></div><div class="p-6"><h3 class="text-xl font-bold mb-2">色彩融合艺术</h3><p class="text-gray-400">观察不同颜色如何在鼠标移动时自然混合，形成独特的视觉艺术。</p></div></div></div></section><!-- 页脚 --><footer class="pt-12 pb-6 border-t border-gray-800"><div class="flex flex-col md:flex-row justify-between items-center"><div class="mb-6 md:mb-0"><div class="text-xl font-bold mb-2"><span class="text-primary">液态</span><span class="text-secondary">交互</span></div><p class="text-gray-500 text-sm">探索数字世界的流体之美</p></div><div class="flex space-x-6 mb-6 md:mb-0"><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300"><i class="fa fa-twitter"></i></a><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300"><i class="fa fa-instagram"></i></a><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300"><i class="fa fa-dribbble"></i></a><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300"><i class="fa fa-github"></i></a></div><div><p class="text-gray-500 text-sm">&copy; 2025 液态交互. 保留所有权利.</p></div></div></footer></main><!-- 液态效果滤镜 --><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><filter id="liquid"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="liquid" /><feComposite in="SourceGraphic" in2="liquid" operator="over" /></filter></svg><script>// 液态背景效果document.addEventListener('DOMContentLoaded', () => {// 创建液态背景const liquidContainer = document.getElementById('liquid-container');const liquidCanvas = document.createElement('canvas');liquidCanvas.id = 'liquid-canvas';liquidCanvas.className = 'absolute inset-0';liquidContainer.appendChild(liquidCanvas);const ctx = liquidCanvas.getContext('2d');// 设置Canvas尺寸function resizeCanvas() {liquidCanvas.width = window.innerWidth;liquidCanvas.height = window.innerHeight;}resizeCanvas();window.addEventListener('resize', resizeCanvas);// 液态效果参数const blobs = [];const blobCount = 8;const colors = ['rgba(59, 130, 246, 0.5)', // primary'rgba(139, 92, 246, 0.5)', // secondary'rgba(236, 72, 153, 0.5)'  // accent];// 创建液滴for (let i = 0; i < blobCount; i++) {blobs.push({x: Math.random() * liquidCanvas.width,y: Math.random() * liquidCanvas.height,radius: 50 + Math.random() * 100,speedX: (Math.random() - 0.5) * 0.5,speedY: (Math.random() - 0.5) * 0.5,color: colors[Math.floor(Math.random() * colors.length)],rotation: Math.random() * Math.PI * 2,rotationSpeed: (Math.random() - 0.5) * 0.01});}// 动画循环function animate() {ctx.clearRect(0, 0, liquidCanvas.width, liquidCanvas.height);// 绘制背景渐变const bgGradient = ctx.createLinearGradient(0, 0, liquidCanvas.width, liquidCanvas.height);bgGradient.addColorStop(0, '#1E293B');bgGradient.addColorStop(1, '#0F172A');ctx.fillStyle = bgGradient;ctx.fillRect(0, 0, liquidCanvas.width, liquidCanvas.height);// 绘制所有液滴ctx.save();ctx.filter = 'blur(40px)';blobs.forEach(blob => {// 更新位置和旋转blob.x += blob.speedX;blob.y += blob.speedY;blob.rotation += blob.rotationSpeed;// 边界检查if (blob.x < -blob.radius) blob.x = liquidCanvas.width + blob.radius;if (blob.x > liquidCanvas.width + blob.radius) blob.x = -blob.radius;if (blob.y < -blob.radius) blob.y = liquidCanvas.height + blob.radius;if (blob.y > liquidCanvas.height + blob.radius) blob.y = -blob.radius;// 绘制液滴ctx.beginPath();ctx.fillStyle = blob.color;// 创建一个不规则形状const points = 8;ctx.moveTo(blob.x + blob.radius * Math.cos(blob.rotation),blob.y + blob.radius * Math.sin(blob.rotation));for (let i = 1; i < points; i++) {const angle = blob.rotation + (i * Math.PI * 2) / points;const distance = blob.radius * (0.8 + 0.4 * Math.sin(i * 1.5 + blob.rotation * 0.5));ctx.lineTo(blob.x + distance * Math.cos(angle),blob.y + distance * Math.sin(angle));}ctx.closePath();ctx.fill();});ctx.restore();requestAnimationFrame(animate);}animate();// 鼠标拖尾效果const trailContainer = document.getElementById('trail-container');const trailElements = [];const maxTrailElements = 20;// 创建拖尾元素for (let i = 0; i < maxTrailElements; i++) {const trail = document.createElement('div');trail.className = 'absolute rounded-full liquid-blob';trail.style.width = `${10 + i * 1.5}px`;trail.style.height = `${10 + i * 1.5}px`;trail.style.opacity = '0';trail.style.transition = `opacity 0.5s ease, transform 0.5s ease`;trail.style.transform = 'translate(-50%, -50%) scale(0)';// 随机颜色const color = colors[Math.floor(Math.random() * colors.length)];trail.style.backgroundColor = color.replace('0.5', '0.8');trailContainer.appendChild(trail);trailElements.push(trail);}// 鼠标移动事件let lastX = 0;let lastY = 0;document.addEventListener('mousemove', (e) => {const x = e.clientX;const y = e.clientY;// 计算移动速度const speed = Math.sqrt(Math.pow(x - lastX, 2) + Math.pow(y - lastY, 2));lastX = x;lastY = y;// 更新拖尾元素trailElements.forEach((trail, index) => {const delay = index * 0.05;setTimeout(() => {trail.style.left = `${x}px`;trail.style.top = `${y}px`;trail.style.opacity = '1';trail.style.transform = `translate(-50%, -50%) scale(${1 - index * 0.05})`;// 淡出效果setTimeout(() => {trail.style.opacity = '0';trail.style.transform = 'translate(-50%, -50%) scale(0)';}, 300);}, delay * 100);});});// 触摸设备支持document.addEventListener('touchmove', (e) => {if (e.touches.length > 0) {const touch = e.touches[0];const x = touch.clientX;const y = touch.clientY;// 模拟鼠标移动事件const mouseEvent = new MouseEvent('mousemove', {clientX: x,clientY: y});document.dispatchEvent(mouseEvent);// 防止页面滚动e.preventDefault();}}, { passive: false });});</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/86855.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/86855.shtml
英文地址，请注明出处：http://en.pswp.cn/bicheng/86855.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

PYTHON从入门到实践9-类和实例

PYTHON从入门到实践9-类和实例

# 【1】面向对象编程 class Student(object):# 可以帮属性值绑定到对象上&#xff0c;self相当于JAVA的thisdef __init__(self, name, age):self.name nameself.age agedef speak(self):print(self.name, 说&#xff1a;老师好)if __name__ __main__:new_student1 Student(…
阅读更多...
matplotlib 绘制极坐标图

matplotlib 绘制极坐标图

1、功能介绍&#xff1a; 使用了 matplotlib 库来创建一个极坐标图 2、代码部分&#xff1a; import matplotlib.pyplot as plt import numpy as np# 设置中文字体 plt.rcParams[font.sans-serif] [SimHei] # 选择黑体字体&#xff0c;支持中文 plt.rcParams[axes.unicode…
阅读更多...
Dask心得与笔记【2】

Dask心得与笔记【2】

文章目录 计算参考文献 计算 数组切片如下 import numpy as np import dask.array as dadata np.arange(1000).reshape(10, 100) a da.from_array(data, chunks(5, 20)) print(a[:,0:3])切片结果是前3列 dask.array<getitem, shape(10, 3), dtypeint64, chunksize(5, 3…
阅读更多...
数据采集合规安全是品牌控价基石

数据采集合规安全是品牌控价基石

在品牌控价与数据分析工作中&#xff0c;数据采集是不可或缺的前置环节。当前主流的数据采集方式为爬虫采集&#xff0c;这种依托机器自动化操作的模式&#xff0c;取代了传统人工逐一浏览、复制数据的繁琐流程&#xff0c;大幅提升了效率。采集后的原始数据&#xff0c;会由系…
阅读更多...
llm推理赋能action policy的探索

llm推理赋能action policy的探索

兄弟&#xff0c;你这个问题非常到位&#xff0c;咱分两个问题详细讲透&#xff1a; &#x1f680; (1) HybridVLA怎么引入更好的推理能力赋能Diffusion Action&#xff1f; HybridVLA 目前设计的亮点&#xff1a; Diffusion Token 与 LLM 自回归结合 但推理能力没有被显式结…
阅读更多...
spring04-管理bean（创建、注入）：基于注解

spring04-管理bean（创建、注入）：基于注解

一、什么是注解&#xff1f; &#xff08;1&#xff09;注解的定义 注解&#xff08;Annotation&#xff09;是 Java 代码中的一种特殊标记&#xff0c;用于在程序运行或编译时提供元信息。 格式&#xff1a; 注解名(属性名属性值, 属性名属性值...)&#xff08;2&#xff…
阅读更多...
docker安装elasticsearch和kibana

docker安装elasticsearch和kibana

elasticsearch版本和kibana版本需保持一致。这里我使用的都是8.18.2 安装elasticsearch docker-compose.yml networks:es-net: external: true services:elasticsearch:container_name: es01deploy:resources:limits:cpus: 0memory: 0environment:- discovery.typesingle-no…
阅读更多...
Python爬虫实战：研究sanitize库相关技术

Python爬虫实战：研究sanitize库相关技术

1. 引言 1.1 研究背景与意义 在当今数字化时代，互联网已成为人们获取信息、交流互动的重要平台。随着 Web 2.0 技术的发展，用户生成内容 (UGC)、社交媒体嵌入、第三方插件等功能极大丰富了网页的内容和交互性，但也带来了严峻的安全挑战。根据 Web 应用安全联盟 (WAS) 的统…
阅读更多...
c++ 学习（二、结构体）

c++ 学习（二、结构体）

目录 一、结构体与const 二、结构体与class的区别 参考链接&#xff1a;69 结构体-结构体中const使用场景_哔哩哔哩_bilibili 一、结构体与const 调用函数的时候&#xff0c;希望这个结构体是可读而不可写的时候&#xff0c;传指针&#xff0c;使用const修饰&#xff0c;方式…
阅读更多...
机器学习开篇：算法分类与开发流程

机器学习开篇：算法分类与开发流程

种一棵树最好的时间是十年前&#xff0c;其次是现在。 一、机器学习算法分类 机器学习&#xff08;ML&#xff0c;Meachine Learning&#xff09;是人工智能的核心领域&#xff0c;让计算机从数据中学习规律并做出预测&#xff0c;本文简单介绍机器学习的算法分类和开发流程。…
阅读更多...
使用pyflink编写demo并将任务提交到yarn集群

使用pyflink编写demo并将任务提交到yarn集群

目录 背景 一、pyflink安装 二、编写demo程序 三、提交yarn前准备 四、提交任务 五、踩坑记录 1、提交任务时客户端出现语法错误 2、提交任务时客户端出现lzma包找不到 3、提交任务时客户端出现“org.apache.flink.streaming.api.utils.PythonTypeUtils.getCollectionIn…
阅读更多...
Vue 3 最基础核心知识详解

Vue 3 最基础核心知识详解

Vue3作为现代前端主流框架&#xff0c;是前后端开发者都应当掌握的核心技能。本篇文章将带你了解vue3的基础核心知识&#xff0c;适合学习与复习 一、Vue 3 应用创建 1.1 创建Vue应用的基本步骤 // main.js import { createApp } from vue // 1. 导入createApp函数 import …
阅读更多...
Bootstrap 5学习教程，从入门到精通，Bootstrap 5 Flex 布局语法知识点及案例（27）

Bootstrap 5学习教程，从入门到精通，Bootstrap 5 Flex 布局语法知识点及案例（27）

Bootstrap 5 Flex 布局语法知识点及案例 Bootstrap 5 提供了强大的 Flexbox 工具集&#xff0c;让布局变得更加简单灵活。以下是 Bootstrap 5 Flex 布局的完整知识点和详细案例代码。 一、Flex 布局基础语法 1. 启用 Flex 布局 <div class"d-flex">我是一个…
阅读更多...
HarmonyOS 5智能单词应用开发：记忆卡（附：源码

HarmonyOS 5智能单词应用开发：记忆卡（附：源码

一、应用概述与核心价值 在语言学习过程中&#xff0c;单词记忆是基础也是难点。本文介绍的智能单词记忆卡应用通过创新的交互设计和科学的学习模式&#xff0c;帮助用户高效记忆单词。应用采用ArkUI框架开发&#xff0c;主要特点包括&#xff1a; 双模式学习系统&#xff1a…
阅读更多...
LeetCode--38.外观数列

LeetCode--38.外观数列

前言&#xff1a;之前我不是说&#xff0c;我后续可能会讲一下递归吗&#xff0c;现在它来了&#xff0c;这道题会用到回溯的方法&#xff0c;并且比较纯粹哦 解题思路&#xff1a; 1.获取信息&#xff1a;&#xff08;下面这些信息差不多是力扣上面的题目信息了&#xff0c;所…
阅读更多...
服务器的安装与安全设置

服务器的安装与安全设置

1&#xff1a;安装操作系统 1、创建虚拟机Win49&#xff08;49为序号&#xff09;&#xff0c;并安装Windows Server 2019操作系统 参考配置&#xff1a;安装系统的分区大小为20GB&#xff0c;其余分区暂不划分&#xff0c; 文件系统格式为NTFS&#…
阅读更多...
Sensodrive SensoJoint机器人力控关节模组抗振动+Sensodrive力反馈系统精准对接

Sensodrive SensoJoint机器人力控关节模组抗振动+Sensodrive力反馈系统精准对接

Sensodrive成立于2003年&#xff0c;起源于德国航空航天中心&#xff08;DLR&#xff09;的LBR项目。公司由一批传感器技术专家创立&#xff0c;专注于高精度工业扭矩传感器的研发。凭借二十余年的技术积累&#xff0c;Sensodrive将DLR轻型机器人扭矩技术引入工业领域&#xff…
阅读更多...
【AI实践】Mac一天熟悉AI模型智能体应用（百炼版）

【AI实践】Mac一天熟悉AI模型智能体应用（百炼版）

25.6.29增加Gummy 实时/一句话语音识别25.6.28增加Qwen TTS本地音频和实时播报 背景 准备环境 MacOS M1电脑&#xff08;其他M系列芯片也可以&#xff09; 为了方便python的使用环境&#xff0c;使用Miniconda&#xff1a;下载链接&#xff1a;Download Anaconda Distribution…
阅读更多...
WEB安全--Java安全--jsp webshell免杀1

WEB安全--Java安全--jsp webshell免杀1

1.1、BCEL ClassLoader 介绍&#xff08;仅适用于BCEL 6.0以下&#xff09;&#xff1a; BCEL&#xff08;Apache Commons BCEL™&#xff09;是一个用于分析、创建和操纵Java类文件的工具库&#xff1b;BCEL的类加载器在解析类名时会对ClassName中有$$BCEL$$标识的类做特殊处…
阅读更多...
Valkey与Redis评估对比：开源替代方案的技术演进

Valkey与Redis评估对比：开源替代方案的技术演进

#作者&#xff1a;朱雷 文章目录 1 概述1.1内存数据结构存储核心特性1.2主流内存数据结构存储设计与适用场景1.3目前主流内存数据结构存储对比 2 Valkey 说明2.1 哨兵架构设计2.2 集群架构设计2.3 valkey 使用企业和业内生态‌ 3 评估指标4 评估结果 1 概述 内存数据结构存储…
阅读更多...
最新文章

Copyright @ 2022~2023