液態交互效果網頁開發--源自鴻蒙5以及iOS26的靈感

首先先來看看最終展示效果

當鼠標靠近“開始探索”的按鈕的時候，按鈕放大并有微弱光效

鼠標靠近之前會給視窗添加一層接近背景的朦朧感，當鼠標放在視窗上朦朧感消失

技術不復雜，這個網頁主要是使用了以下關鍵技術：

  • 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