找到
435
篇与
阿贵
相关的结果
- 第 33 页
-
用CSS打造一个生动的卡车加载动画 用CSS打造一个生动的卡车加载动画 在现代网页设计中，动画效果是吸引用户注意力和提升用户体验的重要手段之一。今天，我们将通过一段CSS代码，展示如何创建一个简单而有趣的卡车加载动画。这个动画不仅能够为你的网页增添活力，还能在用户等待内容加载时提供视觉上的愉悦。 动画效果 GIF 2025-3-8 21-34-24.gif图片 这个动画展示了一辆卡车在道路上行驶的场景。卡车的车身会随着行驶而上下晃动，模拟真实的行驶状态。道路上的线条和路灯也会随着卡车的移动而向后滚动，营造出一种卡车在不断前进的感觉。 代码实现 我们使用了一些常见的CSS属性，如flex布局、position定位以及@keyframes动画，来实现这个效果。通过这些属性的组合，我们成功地创建了一个动态的卡车加载动画。 完整的css代码： 隐藏内容，请前往内页查看详情 React组件代码： 隐藏内容，请前往内页查看详情 Vue组件代码： 隐藏内容，请前往内页查看详情 html代码： <div class="loader"> <div class="truckWrapper"> <div class="truckBody"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 198 93" class="trucksvg" > <path stroke-width="3" stroke="#282828" fill="#F83D3D" d="M135 22.5H177.264C178.295 22.5 179.22 23.133 179.594 24.0939L192.33 56.8443C192.442 57.1332 192.5 57.4404 192.5 57.7504V89C192.5 90.3807 191.381 91.5 190 91.5H135C133.619 91.5 132.5 90.3807 132.5 89V25C132.5 23.6193 133.619 22.5 135 22.5Z" ></path> <path stroke-width="3" stroke="#282828" fill="#7D7C7C" d="M146 33.5H181.741C182.779 33.5 183.709 34.1415 184.078 35.112L190.538 52.112C191.16 53.748 189.951 55.5 188.201 55.5H146C144.619 55.5 143.5 54.3807 143.5 53V36C143.5 34.6193 144.619 33.5 146 33.5Z" ></path> <path stroke-width="2" stroke="#282828" fill="#282828" d="M150 65C150 65.39 149.763 65.8656 149.127 66.2893C148.499 66.7083 147.573 67 146.5 67C145.427 67 144.501 66.7083 143.873 66.2893C143.237 65.8656 143 65.39 143 65C143 64.61 143.237 64.1344 143.873 63.7107C144.501 63.2917 145.427 63 146.5 63C147.573 63 148.499 63.2917 149.127 63.7107C149.763 64.1344 150 64.61 150 65Z" ></path> <rect stroke-width="2" stroke="#282828" fill="#FFFCAB" rx="1" height="7" width="5" y="63" x="187" ></rect> <rect stroke-width="2" stroke="#282828" fill="#282828" rx="1" height="11" width="4" y="81" x="193" ></rect> <rect stroke-width="3" stroke="#282828" fill="#DFDFDF" rx="2.5" height="90" width="121" y="1.5" x="6.5" ></rect> <rect stroke-width="2" stroke="#282828" fill="#DFDFDF" rx="2" height="4" width="6" y="84" x="1" ></rect> </svg> </div> <div class="truckTires"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30" class="tiresvg" > <circle stroke-width="3" stroke="#282828" fill="#282828" r="13.5" cy="15" cx="15" ></circle> <circle fill="#DFDFDF" r="7" cy="15" cx="15"></circle> </svg> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30" class="tiresvg" > <circle stroke-width="3" stroke="#282828" fill="#282828" r="13.5" cy="15" cx="15" ></circle> <circle fill="#DFDFDF" r="7" cy="15" cx="15"></circle> </svg> </div> <div class="road"></div> <svg xml:space="preserve" viewBox="0 0 453.459 453.459" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" fill="#000000" class="lampPost" > <path d="M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993 c-1.65,5.146-2.507,10.54-2.507,16.017c0,28.956,23.558,52.514,52.514,52.514c28.956,0,52.514-23.558,52.514-52.514 c0-5.478-0.856-10.872-2.506-16.017h9.992c0-9.354-19.352-17.204-45.463-19.366v-8.954h-6.149C200.189,38.779,223.924,16,252.882,16 c29.952,0,54.32,24.368,54.32,54.32c0,28.774-11.078,37.009-25.105,47.437c-17.444,12.968-37.216,27.667-37.216,78.884v113.914 h-0.797c-5.068,0-9.174,4.108-9.174,9.177c0,2.844,1.293,5.383,3.321,7.066c-3.432,27.933-26.851,95.744-8.226,115.459v11.202h45.75 v-11.202c18.625-19.715-4.794-87.527-8.227-115.459c2.029-1.683,3.322-4.223,3.322-7.066c0-5.068-4.107-9.177-9.176-9.177h-0.795 V196.641c0-43.174,14.942-54.283,30.762-66.043c14.793-10.997,31.559-23.461,31.559-60.277C323.202,31.545,291.656,0,252.882,0z M232.77,111.694c0,23.442-19.071,42.514-42.514,42.514c-23.442,0-42.514-19.072-42.514-42.514c0-5.531,1.078-10.957,3.141-16.017 h78.747C231.693,100.736,232.77,106.162,232.77,111.694z" ></path> </svg> </div> </div> 总结 通过这段CSS代码，我们成功地创建了一个动态的卡车加载效果。这个动画不仅展示了CSS的强大功能，还为我们提供了一种在网页中增加趣味性和互动性的方法。希望这个示例能激发你在自己的项目中尝试更多有趣的CSS动画效果！ 如果你对这个动画有任何疑问或建议，欢迎在评论区留言讨论。感谢阅读！
-
关于大模型工具Ollama存在潜在安全风险的情况通报 关于Ollama默认配置安全风险的通告 来源：国家网络与信息安全信息通报中心 近期，清华大学网络空间测绘联合研究中心分析发现，开源跨平台大模型工具Ollama在默认配置下存在未授权访问与模型窃取等严重安全隐患。鉴于当前DeepSeek等大模型的广泛研究、部署和应用，多数用户在使用Ollama进行私有化部署时未修改默认配置，导致数据泄露、算力盗取、服务中断等安全风险，极易引发网络和数据安全事件。现将相关风险隐患及安全加固建议通报如下： 一、风险隐患详情 使用Ollama在本地部署DeepSeek等大模型时，会在本地启动一个Web服务，默认开放11434端口且无任何鉴权机制。该服务直接暴露在公网环境中，存在以下风险： 未授权访问 未授权用户可随意访问模型，并利用特定工具直接对模型及其数据进行操作。攻击者无需认证即可调用模型服务、获取模型信息，甚至通过恶意指令删除模型文件或窃取数据。 数据泄露 通过特定接口（如/api/show）可访问并提取模型数据，导致敏感信息泄露。例如，攻击者可获取模型的license信息及其他已部署模型的相关敏感数据。 历史漏洞利用 攻击者可利用Ollama框架历史漏洞（CVE-2024-39720/39722/39719/39721），直接调用模型接口实施数据投毒、参数窃取、恶意文件上传及关键组件删除等操作，严重威胁模型服务的核心数据、算法完整性和运行稳定性。 二、安全加固建议 为有效防范上述安全风险，建议采取以下加固措施： 限制Ollama监听范围 仅允许11434端口本地访问，并定期验证端口状态，确保服务不暴露在公网环境中。 配置防火墙规则 对公网接口实施双向端口过滤，阻断11434端口的出入站流量，防止外部攻击者访问。 实施多层认证与访问控制 启用API密钥管理，定期更换密钥并限制调用频率。 部署IP白名单或零信任架构，仅授权可信设备访问模型服务。 禁用危险操作接口 禁用push、delete、pull等高风险接口，并限制chat接口的调用频率，防止DDoS攻击。 修复历史漏洞 及时更新Ollama至安全版本，修复已知漏洞（如CVE-2024-39720/39722/39719/39721），确保系统安全性。 三、应急处置建议 目前，已有大量存在此类安全隐患的服务器暴露在互联网上。建议广大用户： 立即开展隐患排查，及时进行安全加固。 发现遭网络攻击情况后，第一时间向当地公安网安部门报告，并配合开展调查处置工作。 国家网络与信息安全信息通报中心将持续加强监测，适时发布后续通报。请各单位高度重视，切实落实安全防护措施，确保网络与数据安全。 国家网络与信息安全信息通报中心 发布日期：2025年3月3日
-
用CSS打造梦幻星空与宇航员动画效果 用 CSS 打造梦幻星空与宇航员动画效果 在现代网页设计中，CSS 动画已经成为提升用户体验的重要工具。今天，我们将分享一段令人惊叹的 CSS 代码，它能够为你的网页添加一个梦幻的星空背景和一个旋转的宇航员动画效果。这段代码不仅视觉效果出众，还能为你的网站增添一份科技感和趣味性。 星空飘雪效果 在这段代码中，我们使用了 @keyframes 来定义星空的飘雪动画。通过 animation 属性，星星从页面顶部缓缓飘落，营造出一种梦幻的氛围。每一颗星星都被精心设计，大小不一，位置各异，仿佛真实的星空一般。 GIF 2025-3-5 21-19-50.gif图片 @keyframes snow { 0% { opacity: 0; transform: translateY(0px); } 20% { opacity: 1; } 100% { opacity: 1; transform: translateY(650px); } }旋转的宇航员 除了星空效果，我们还添加了一个旋转的宇航员动画。宇航员的设计非常精致，从头盔到身体，每一个细节都通过 CSS 精心绘制。宇航员在页面中央缓缓旋转，仿佛在太空中漂浮，给人一种身临其境的感觉。 @keyframes astronaut { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }完整的CSS代码： 隐藏内容，请前往内页查看详情 React组件代码： 隐藏内容，请前往内页查看详情 Vue组件代码： 隐藏内容，请前往内页查看详情 如何使用 要将这段代码应用到你的网页中，只需将 CSS 代码复制到你的样式文件中，并在 HTML 中添加相应的结构即可。你可以根据自己的需求调整动画的速度、星星的数量和宇航员的大小。 <!-- From Uiverse.io by JkHuger --> <div class="box-of-star1"> <div class="star star-position1"></div> <div class="star star-position2"></div> <div class="star star-position3"></div> <div class="star star-position4"></div> <div class="star star-position5"></div> <div class="star star-position6"></div> <div class="star star-position7"></div> </div> <div class="box-of-star2"> <div class="star star-position1"></div> <div class="star star-position2"></div> <div class="star star-position3"></div> <div class="star star-position4"></div> <div class="star star-position5"></div> <div class="star star-position6"></div> <div class="star star-position7"></div> </div> <div class="box-of-star3"> <div class="star star-position1"></div> <div class="star star-position2"></div> <div class="star star-position3"></div> <div class="star star-position4"></div> <div class="star star-position5"></div> <div class="star star-position6"></div> <div class="star star-position7"></div> </div> <div class="box-of-star4"> <div class="star star-position1"></div> <div class="star star-position2"></div> <div class="star star-position3"></div> <div class="star star-position4"></div> <div class="star star-position5"></div> <div class="star star-position6"></div> <div class="star star-position7"></div> </div> <div data-js="astro" class="astronaut"> <div class="head"></div> <div class="arm arm-left"></div> <div class="arm arm-right"></div> <div class="body"> <div class="panel"></div> </div> <div class="leg leg-left"></div> <div class="leg leg-right"></div> <div class="schoolbag"></div> </div>结语 这段 CSS 代码不仅展示了 CSS 的强大功能，也为网页设计师提供了一种新的创意表达方式。无论是用于个人博客、科技类网站，还是作为登录页的背景，这段代码都能为你的网页增添一份独特的魅力。希望你喜欢这个效果，并能在你的项目中加以运用！ 如果你对这段代码感兴趣，不妨尝试将其应用到你的网页中，体验一下它带来的视觉盛宴吧！
-
用CSS实现一个趣味手指点击加载动画 用CSS实现一个趣味手指点击加载动画 在网页设计中，加载动画不仅是提升用户体验的重要元素，还能为页面增添趣味性和互动性。今天，我们将分享一个用纯CSS实现的手指点击加载动画。这个动画通过模拟手指点击的动作，生动有趣，适合用于各种网页场景。 动画效果简介 这个动画展示了一只手指在屏幕上点击的效果。手指的每个关节都有细致的动画，点击动作流畅自然，背景阴影和光影效果也让整个动画更加逼真。通过CSS的关键帧动画和渐变背景，我们成功地将这一场景生动地呈现出来。 完整CSS代码： 隐藏内容，请前往内页查看详情 React组件代码： 隐藏内容，请前往内页查看详情 Vue组件代码： 隐藏内容，请前往内页查看详情 如何使用 要将这个动画应用到你的网页中，只需将以下HTML代码添加到你的页面中： <div class="🤚"> <div class="🌴"></div> <div class="👍"></div> <div class="👉"></div> <div class="👉"></div> <div class="👉"></div> <div class="👉"></div> </div>然后将CSS代码复制到你的样式表中即可。你可以根据需要调整动画的持续时间、尺寸或颜色，使其更符合你的网页风格。 适用场景 这个手指点击加载动画非常适合用于以下场景： 网页加载动画：当页面内容正在加载时，展示这个动画可以缓解用户的等待情绪。 互动类网站：动画的趣味性非常适合用于需要用户点击操作的网站，比如表单提交或按钮点击。 移动端网页：模拟手指点击的动作非常适合用于移动端网页，增强用户的互动体验。 结语 通过这个手指点击加载动画，我们再次见证了CSS的强大之处。仅仅使用CSS，我们就能创造出如此生动且富有创意的动画效果。希望这个动画能为你的网页设计带来灵感，并激发你探索更多CSS动画的可能性。 如果你喜欢这个动画，不妨尝试调整其中的参数，创造出属于你自己的独特效果。CSS的世界充满了无限的可能，等待你去发现和创造！
-
用CSS打造一个可爱的仓鼠跑轮加载动画 用CSS打造一个可爱的仓鼠跑轮加载动画 在网页设计中，加载动画是提升用户体验的重要元素之一。一个有趣且富有创意的加载动画不仅能缓解用户等待的焦虑，还能为页面增添独特的个性。今天，我们将分享一个用纯CSS实现的仓鼠跑轮加载动画，这个动画生动有趣，适合用于各种网页场景。 动画效果简介 这个动画展示了一只仓鼠在一个旋转的跑轮中奔跑的场景。仓鼠的头部、耳朵、眼睛、四肢和尾巴都有细致的动画效果，跑轮的辐条也在不断旋转，整体效果非常逼真。通过CSS的关键帧动画和渐变背景，我们成功地将这一场景生动地呈现出来。 完整CSS代码： 隐藏内容，请前往内页查看详情 React组件代码： 隐藏内容，请前往内页查看详情 Vue组件代码： 隐藏内容，请前往内页查看详情 如何使用 要将这个动画应用到你的网页中，只需将以下HTML代码添加到你的页面中： <div aria-label="Orange and tan hamster running in a metal wheel" role="img" class="wheel-and-hamster"> <div class="wheel"></div> <div class="hamster"> <div class="hamster__body"> <div class="hamster__head"> <div class="hamster__ear"></div> <div class="hamster__eye"></div> <div class="hamster__nose"></div> </div> <div class="hamster__limb hamster__limb--fr"></div> <div class="hamster__limb hamster__limb--fl"></div> <div class="hamster__limb hamster__limb--br"></div> <div class="hamster__limb hamster__limb--bl"></div> <div class="hamster__tail"></div> </div> </div> <div class="spoke"></div> </div>然后将CSS代码复制到你的样式表中即可。你可以根据需要调整动画的持续时间、尺寸或颜色，使其更符合你的网页风格。 适用场景 这个仓鼠跑轮加载动画非常适合用于以下场景： 网页加载动画：当页面内容正在加载时，展示这个动画可以缓解用户的等待情绪。 游戏或娱乐类网站：动画的趣味性非常适合用于游戏、儿童或宠物相关的网站。 个人博客或作品集：为你的个人网站增添一抹独特的创意，吸引访客的注意力。 结语 通过这个仓鼠跑轮加载动画，我们再次见证了CSS的强大之处。仅仅使用CSS，我们就能创造出如此生动且富有创意的动画效果。希望这个动画能为你的网页设计带来灵感，并激发你探索更多CSS动画的可能性。 如果你喜欢这个动画，不妨尝试调整其中的参数，创造出属于你自己的独特效果。CSS的世界充满了无限的可能，等待你去发现和创造！
