<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
  <channel>
    <title>爬行的蜗牛 - HTML+CSS</title>
    <link>https://www.ydnl.net/forum-43-1.html</link>
    <description>Latest 20 threads of HTML+CSS</description>
    <copyright>Copyright(C) 爬行的蜗牛</copyright>
    <generator>Discuz! Board by Discuz! Team</generator>
    <lastBuildDate>Sat, 14 Nov 2026 00:22:27 +0000</lastBuildDate>
    <ttl>60</ttl>
    <image>
      <url>https://www.ydnl.net/static/image/common/logo_88_31.gif</url>
      <title>爬行的蜗牛</title>
      <link>https://www.ydnl.net/</link>
    </image>
    <item>
      <title>HTML+CSS实现科技感加载效果！！附源码！！</title>
      <link>https://www.ydnl.net/thread-233-1-1.html</link>
      <description><![CDATA[完整源码

HTML
style.CSS]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Thu, 15 Oct 2026 00:01:08 +0000</pubDate>
    </item>
    <item>
      <title>svg发送按钮动画</title>
      <link>https://www.ydnl.net/thread-205-1-1.html</link>
      <description><![CDATA[这是一个交互式的发送按钮动画效果。当用户点击\&quot;Send\&quot;按钮时，会触发一系列流畅的动画：按钮变形为圆形，纸飞机图标沿着曲线路径飞行，最后变成一个勾号，同时显示\&quot;Sent!\&quot;文字，整个过程形成一个完整的发送确认动画。



复制源代码到空白的html格式文件，在浏览中打开 ...]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 26 Sep 2025 03:46:01 +0000</pubDate>
    </item>
    <item>
      <title>让你大跌眼镜的疯狂 HTML 和 CSS 技巧</title>
      <link>https://www.ydnl.net/thread-204-1-1.html</link>
      <description><![CDATA[今天，分享一个让你大开眼界的技巧。通过使用这个技巧，你可以将整个网页变成一个CSS编辑器。没错，你从未见过这种方法。当我第一次尝试时，我完全被震惊到了。现在，让我们开始吧！步骤 1首先，创建一个基础的HTML骨架，并在标签内嵌入一个标签。步骤 2接下来，我们进 ...]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 26 Sep 2025 03:40:44 +0000</pubDate>
    </item>
    <item>
      <title>HTML&amp;CSS&amp;JS：超级惊艳的全屏图片轮播效果</title>
      <link>https://www.ydnl.net/thread-203-1-1.html</link>
      <description><![CDATA[演示效果

HTML&amp;CSSHTML
[*]card：卡片容器，包含内容和图片。
[*]content：内容区域，包含标题。
[*]image：图片区域，包含一个 img 标签。
[*]dots：指示点容器，包含三个指示点。
[*]script：内联 JavaScript 逻辑。
CSS
[*]@import：引入 Google 字体。 *：全局样式 ...]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 26 Sep 2025 03:21:43 +0000</pubDate>
    </item>
    <item>
      <title>HTML&amp;CSS&amp;JS：卡片扫描动画效果</title>
      <link>https://www.ydnl.net/thread-202-1-1.html</link>
      <description><![CDATA[HTML&amp;CSS


[*].controls：控制按钮区域，控制动画的暂停、重置、方向。
[*].speed-indicator：显示当前滚动速度。
[*].container：主容器，包含：
[*]particleCanvas：Three.js 粒子背景。
[*]scannerCanvas：扫描光束粒子效果。
[*].scanner：CSS 实现的扫描光束。
 ...]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Thu, 25 Sep 2025 08:59:12 +0000</pubDate>
    </item>
    <item>
      <title>优雅降级的&lt;details&gt;折叠面板</title>
      <link>https://www.ydnl.net/thread-175-1-1.html</link>
      <description><![CDATA[在原生HTML折叠面板的基础上，通过CSS和JavaScript增加了动画效果，并动态计算每个部分的高度。如果用户禁用了JavaScript，界面也能保持正常功能。

效果演示

HTML]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 17 Jan 2025 14:17:23 +0000</pubDate>
    </item>
    <item>
      <title>无障碍折叠面板</title>
      <link>https://www.ydnl.net/thread-174-1-1.html</link>
      <description><![CDATA[可访问性是UI设计中的重要因素。这个折叠面板不仅注重视觉上的无障碍设计，还支持键盘操作，用户可以使用TAB键和ENTER键导航各个部分，提升用户体验。

效果演示


HTML]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 17 Jan 2025 14:14:19 +0000</pubDate>
    </item>
    <item>
      <title>原生HTML的&lt;details&gt;折叠面板</title>
      <link>https://www.ydnl.net/thread-173-1-1.html</link>
      <description><![CDATA[借助HTML5的标签，开发者可以不借助JavaScript或其他语言就实现原生的折叠面板。CSS则可以进一步美化外观，并且这一方案具有良好的性能和兼容性。

效果演示


HTML]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 17 Jan 2025 14:12:14 +0000</pubDate>
    </item>
    <item>
      <title>纯CSS折叠面板</title>
      <link>https://www.ydnl.net/thread-172-1-1.html</link>
      <description><![CDATA[HTML]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 17 Jan 2025 14:04:01 +0000</pubDate>
    </item>
    <item>
      <title>HTML&amp;CSS：高级感的图片轮播效果(一键复制)</title>
      <link>https://www.ydnl.net/thread-171-1-1.html</link>
      <description><![CDATA[这个页面的设计是一个简单的图片轮播效果，适合用作网页的背景或者展示多个图片的场景

效果演示]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 17 Jan 2025 13:57:44 +0000</pubDate>
    </item>
    <item>
      <title>使用HTML和CSS创建等距按钮悬停效果！！附源码！！</title>
      <link>https://www.ydnl.net/thread-170-1-1.html</link>
      <description><![CDATA[效果展示


HTML

CSS]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 17 Jan 2025 13:55:06 +0000</pubDate>
    </item>
    <item>
      <title>HTML+CSS+JavaScript实现动态数字时钟-明暗主题！！附源码！！</title>
      <link>https://www.ydnl.net/thread-169-1-1.html</link>
      <description><![CDATA[效果展示



HTML

CSS]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 17 Jan 2025 13:51:20 +0000</pubDate>
    </item>
    <item>
      <title>HTML+CSS实现鼠标悬停后导航栏反转效果！！附源码！！</title>
      <link>https://www.ydnl.net/thread-168-1-1.html</link>
      <description><![CDATA[效果展示


完整源码]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 17 Jan 2025 13:49:31 +0000</pubDate>
    </item>
    <item>
      <title>分享两个CSS酷炫的卡片动画效果（二）</title>
      <link>https://www.ydnl.net/thread-167-1-1.html</link>
      <description><![CDATA[效果1演示：


代码：

效果2演示：


代码：]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 17 Jan 2025 13:47:36 +0000</pubDate>
    </item>
    <item>
      <title>CSS+JS实现一个蜂窝布局效果</title>
      <link>https://www.ydnl.net/thread-166-1-1.html</link>
      <description><![CDATA[1、什么是蜂窝布局


蜂窝布局，顾名思义，其灵感来源于自然界中蜜蜂的蜂巢结构。蜂巢由一系列紧密排列的正六边形单房组成，这种结构在具有出色的空间利用效率。
蜂窝布局是一种基于六边形单元排列的布局方式，类似于蜂巢的结构。每个六边形单元紧密相邻，形成连续且 ...]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 17 Jan 2025 13:43:53 +0000</pubDate>
    </item>
    <item>
      <title>炫酷悬停特效（可复制源代码）</title>
      <link>https://www.ydnl.net/thread-165-1-1.html</link>
      <description><![CDATA[源代码]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 17 Jan 2025 13:35:52 +0000</pubDate>
    </item>
    <item>
      <title>HTML&amp;CSS：惊爆！3D 翻转卡片，图片信息惊艳呈现</title>
      <link>https://www.ydnl.net/thread-164-1-1.html</link>
      <description><![CDATA[演示效果



HTML&amp;CSS



CSS 样式]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Fri, 17 Jan 2025 13:32:44 +0000</pubDate>
    </item>
    <item>
      <title>HTML&amp;CSS：流光按钮，一看就会</title>
      <link>https://www.ydnl.net/thread-162-1-1.html</link>
      <description><![CDATA[这段 HTML 代码创建了一个具有动态颜色旋转效果的按钮



HTML&amp;CSS]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Sun, 12 Jan 2025 04:00:53 +0000</pubDate>
    </item>
    <item>
      <title>前端纯CSS特效丨新型选中特效（开关）</title>
      <link>https://www.ydnl.net/thread-157-1-1.html</link>
      <description><![CDATA[HTML：

CSS：]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Sun, 22 Dec 2024 12:33:20 +0000</pubDate>
    </item>
    <item>
      <title>前端小卡片效果(附源码)</title>
      <link>https://www.ydnl.net/thread-156-1-1.html</link>
      <description><![CDATA[]]></description>
      <category>HTML+CSS</category>
      <author>yycvip</author>
      <pubDate>Sun, 22 Dec 2024 12:30:40 +0000</pubDate>
    </item>
  </channel>
</rss>