找到
20
篇与
llm520
相关的结果
-
美观的css卡片 美观的CSS卡片：打造令人印象深刻的UI元素 在现代网页设计中，卡片式布局已成为展示内容的流行方式。通过精心设计的CSS卡片，您可以为用户提供既美观又功能性的界面元素。 基本卡片结构 <div class="card"> <img src="https://example.com/images/card-bg.jpg" alt="卡片背景图" class="card-image"> <div class="card-content"> <h3 class="card-title">卡片标题</h3> <p class="card-text">这里是卡片内容描述...</p> <button class="card-button">了解更多</button> </div> </div>核心CSS样式 .card { width: 300px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; background: white; } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); } .card-image { width: 100%; height: 180px; object-fit: cover; background-image: url('https://example.com/images/placeholder.jpg'); } .card-content { padding: 20px; } .card-title { margin: 0 0 10px; color: #333; font-size: 1.5rem; } .card-text { color: #666; margin-bottom: 15px; line-height: 1.5; } .card-button { background-color: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .card-button:hover { background-color: #45a049; }高级卡片效果 1. 玻璃态卡片 .glass-card { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); }2. 3D翻转效果 .flip-card { perspective: 1000px; } .flip-card-inner { transition: transform 0.6s; transform-style: preserve-3d; } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { backface-visibility: hidden; } .flip-card-back { transform: rotateY(180deg); }响应式设计 @media (max-width: 768px) { .card { width: 100%; margin-bottom: 20px; } .card-image { height: 220px; } }实际应用示例 <div class="card glass-card"> <img src="https://example.com/images/product-card.jpg" alt="产品展示" class="card-image"> <div class="card-content"> <h3 class="card-title">优质产品</h3> <p class="card-text">这款产品采用最新技术，为您带来无与伦比的体验。</p> <div class="price">$99.99</div> <button class="card-button">立即购买</button> </div> </div>通过以上CSS技巧，您可以创建出既美观又实用的卡片组件，提升网站的整体用户体验。记住，好的卡片设计应该平衡视觉效果和功能性，同时保持响应式布局以适应各种设备。
-
Typecho自动摘要生成插件 ZhaiyaoGPT - Typecho自动摘要生成插件 一个基于DeepSeek AI的Typecho插件，自动为文章生成摘要并显示在文章最上方。 image图片 功能特点 使用DeepSeek AI自动生成文章摘要 支持多种DeepSeek模型选择 摘要显示在文章顶部 自动适配博客主题色 多种摘要样式可选（默认、浅色、深色、自定义） 可选择摘要显示场景（文章页、首页、归档页） 摘要内容缓存功能，减轻服务器负担 异步加载：文章内容立即显示，摘要异步生成，不影响页面加载速度 模拟打字效果：摘要生成时有打字效果，增强用户体验 流式生成：支持流式API，可实时看到摘要生成过程 单文章控制：可在文章编辑页单独控制是否开启摘要 文章预生成：发布/更新文章时预生成摘要，无需等待 安装方法 下载本插件，解压后重命名文件夹为 ZhaiyaoGPT 将插件文件夹上传到 Typecho 的 /usr/plugins/ 目录下 登录管理后台，进入"控制台" > "插件" 找到 "ZhaiyaoGPT"，点击"启用" 进入插件设置页面，配置DeepSeek API密钥等信息 使用说明 基本配置 DeepSeek API密钥：必填项，需要在DeepSeek官网获取API密钥 DeepSeek模型：选择使用的AI模型，推荐使用 deepseek-chat 摘要长度：生成摘要的字符长度限制 是否显示摘要：总开关，控制是否显示摘要 摘要样式：选择摘要显示的样式（默认主题色、浅色、深色、自定义） 自定义CSS：选择自定义样式时可用，自定义摘要的CSS样式 显示场景：选择在哪些页面显示摘要（文章页面、首页、归档页） 缓存时间：设置摘要缓存时间（秒），默认为86400秒（1天） 打字效果速度：设置模拟打字效果的速度，数值越小速度越快 是否使用流式生成：开启后使用流式API，可实时看到摘要生成过程 摘要加载提示：摘要生成过程中显示的文字 是否预生成摘要：开启后在文章发布/更新时自动生成摘要，提高访问速度 优先使用保存的摘要：开启后优先使用文章中保存的摘要，而不是重新生成 文章编辑页面选项 在文章编辑页面底部，可以找到"是否为本文生成摘要"选项，可以单独控制当前文章是否生成摘要。对于已生成摘要的文章，还可以查看和清除已生成的摘要。 性能优化 本插件使用了多种技术来确保不影响文章加载速度： 异步加载：摘要在文章内容加载完成后异步请求 延迟加载：对于不在视口内的摘要，使用延迟加载技术 预生成：可在文章发布/更新时预先生成摘要 智能缓存：自动缓存已生成的摘要，避免重复生成 直接嵌入：对于已生成的摘要，直接嵌入HTML，无需JavaScript加载 注意事项 确保您的服务器已启用 cURL 扩展 文章内容少于100字时不会生成摘要 为了减少API调用，插件会缓存生成的摘要 如果开启流式生成，确保您的服务器支持SSE（Server-Sent Events） 常见问题 Q: 为什么我的文章没有生成摘要？ A: 可能是以下原因导致： 文章内容少于100字 插件设置中"是否显示摘要"选项未开启 插件设置中"显示场景"未选择当前页面 文章中已保存了摘要，插件设置中"优先使用保存的摘要"未开启 Q: 如何获取DeepSeek API密钥？ A: 请访问DeepSeek官网注册账号，然后在"API密钥"页面获取API密钥。 Q: 如何修改摘要的样式？ A: 在插件设置中选择"自定义"样式，然后在"自定义CSS"文本框中添加您的CSS样式代码。例如：.zhaiyao-custom { color: #ff6600; background-color: #f5f5f5; } Q: 如何清除摘要缓存？ A: 您可以手动删除 /usr/cache/ 目录下以 zhaiyaogpt_ 开头的缓存文件，或在文章编辑页面点击"清除已生成的摘要"按钮。 Q: 摘要生成是否会减慢网站加载速度？ A: 不会。本插件使用异步加载方式，会先显示文章内容，然后在后台生成摘要，不会影响页面的加载速度。此外，插件支持预生成和智能缓存功能，进一步提高了速度。 Q: "Model Not Exist"错误如何解决？ A: DeepSeek API的模型名称可能会变化，请尝试在插件设置中切换其他模型，推荐使用 deepseek-chat 或 deepseek-v2。 Q: 流式生成显示"连接错误"？ A: 这可能是由于以下原因导致： 服务器不支持SSE（Server-Sent Events） 您的网站使用了CDN或反向代理，配置不支持长连接 服务器有超时设置，SSE连接被过早关闭 解决方法： 在插件设置中关闭"流式生成"选项，使用普通方式生成摘要 如果使用Nginx，添加以下配置：proxy_buffering off; 检查并调整服务器超时设置 Q: 如何完全禁用某篇文章的摘要生成？ A: 在文章编辑页面底部的"是否为本文生成摘要"选择"禁用"即可。 更新日志 1.2.0 添加文章编辑页面控制选项 增加预生成摘要功能 优化页面加载速度 添加智能缓存系统 实现视口内容优先加载 1.1.1 修复流式生成连接错误问题 增加错误处理和日志记录 添加自动回退功能，当流式生成失败时自动切换到普通方式 1.1.0 添加异步加载功能，不影响页面加载速度 添加模拟打字效果 支持流式API，实时查看摘要生成过程 增加错误处理和日志记录 优化UI和用户体验 1.0.0 插件首次发布 版权和许可 本插件采用 MIT 许可证发布，详见 LICENSE 文件。 鸣谢 Typecho DeepSeek AI
-
精美的css卡片 前言 分享一个个人觉得比较美观的卡片 源码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>毛玻璃效果提示卡片</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea, #764ba2); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; overflow: hidden; } .background { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at 10% 20%, rgba(255, 200, 124, 0.2) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(173, 216, 230, 0.2) 0%, transparent 20%), radial-gradient(circle at 50% 50%, rgba(152, 251, 152, 0.2) 0%, transparent 30%); z-index: -1; } .glass-card { width: 350px; min-height: 400px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3); padding: 30px; position: relative; overflow: hidden; transition: transform 0.5s ease, box-shadow 0.5s ease; z-index: 1; } .glass-card:hover { transform: translateY(-10px); box-shadow: 0 12px 40px rgba(31, 38, 135, 0.3), inset 0 6px 25px rgba(255, 255, 255, 0.4); } .card-header { text-align: center; margin-bottom: 30px; position: relative; } .card-icon { width: 80px; height: 80px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: white; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 2px 5px rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.25); } .card-title { color: white; font-size: 28px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .card-subtitle { color: rgba(255, 255, 255, 0.85); font-size: 16px; font-weight: 400; } .card-content { color: rgba(255, 255, 255, 0.9); line-height: 1.6; font-size: 16px; margin-bottom: 30px; text-align: center; } .divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); margin: 25px 0; } .features { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; } .feature { display: flex; align-items: center; gap: 12px; } .feature-icon { width: 36px; height: 36px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: white; flex-shrink: 0; } .feature-text { color: rgba(255, 255, 255, 0.85); font-size: 15px; } .cta-button { display: block; width: 100%; padding: 14px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 12px; color: white; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-align: center; text-decoration: none; letter-spacing: 0.5px; } .cta-button:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .floating-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .float-circle { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.4; } .circle-1 { width: 150px; height: 150px; background: #ff9a9e; top: -50px; right: -50px; } .circle-2 { width: 120px; height: 120px; background: #a6c1ee; bottom: -30px; left: -30px; } .circle-3 { width: 80px; height: 80px; background: #fbc2eb; top: 40%; left: 20%; } @media (max-width: 400px) { .glass-card { width: 100%; max-width: 350px; } } </style> </head> <body> <div class="background"></div> <div class="glass-card"> <div class="floating-elements"> <div class="float-circle circle-1"></div> <div class="float-circle circle-2"></div> <div class="float-circle circle-3"></div> </div> <div class="card-header"> <div class="card-icon">✨</div> <h1 class="card-title">精美提示卡片</h1> <p class="card-subtitle">纯CSS毛玻璃效果设计</p> </div> <div class="card-content"> 这是一个采用现代玻璃态设计风格的提示卡片。使用纯CSS实现毛玻璃效果，具有优雅的悬浮动画和细腻的光影效果。 </div> <div class="divider"></div> <div class="features"> <div class="feature"> <div class="feature-icon">✓</div> <div class="feature-text">纯CSS实现，无JavaScript依赖</div> </div> <div class="feature"> <div class="feature-icon">✓</div> <div class="feature-text">响应式设计，适配各种屏幕尺寸</div> </div> <div class="feature"> <div class="feature-icon">✓</div> <div class="feature-text">使用backdrop-filter实现毛玻璃效果</div> </div> <div class="feature"> <div class="feature-icon">✓</div> <div class="feature-text">平滑的悬浮动画和过渡效果</div> </div> </div> <a href="#" class="cta-button">了解更多</a> </div> <script> // 添加简单的悬浮动画增强效果 document.querySelector('.glass-card').addEventListener('mousemove', (e) => { const card = e.currentTarget; const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const angleY = (x - centerX) / 8; const angleX = (centerY - y) / 8; card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) translateY(-10px)`; }); document.querySelector('.glass-card').addEventListener('mouseleave', (e) => { const card = e.currentTarget; card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(-10px)'; }); </script> </body> </html>设计特点 毛玻璃效果：使用backdrop-filter: blur(12px)实现高级玻璃态效果 精致UI元素： 中心图标采用圆形毛玻璃设计 半透明边框和柔和的内发光效果 渐变分割线增强视觉层次 动态效果： 卡片悬浮时轻微上浮和阴影加深 鼠标移动时产生3D倾斜效果（通过JavaScript增强） 按钮的悬停动画 浮动元素：背景中的彩色模糊圆形增强玻璃质感 响应式设计：适配各种屏幕尺寸 这个设计完全使用纯CSS实现，仅添加了一小段JavaScript来增强交互体验（3D倾斜效果）。卡片具有优雅的玻璃材质感、柔和的光影效果和平滑的过渡动画，整体视觉效果现代而专业。 效果演示 屏幕录制 2025 06 01 031941图片
