/* 如果不需要介绍可根据2处修复删除相关代码 */


        /* 容器样式：使用 Flexbox 布局，允许换行，居中对齐，设置间距和内边距 */
        .cydh {
            display: flex; /* 使用 Flexbox 布局 */
            flex-wrap: wrap; /* 允许换行 */
            gap: 10px; /* 设置子元素之间的间距 */
            justify-content: center; /* 子元素居中对齐 */
            padding: 5px; /* 内边距 */
        }

        /* 按钮基础样式：设置按钮的布局、背景、圆角、悬停效果等 */
        .cydhanniu {
            display: flex; /* 使用 Flexbox 布局 */
            align-items: center; /* 垂直居中对齐 */
            padding: 5px; /* 内边距 */
            font-size: 16px; /* 字体大小 */
            background-color: rgba(224, 224, 224, 0.8); /* 背景颜色 */
            border: none; /* 去掉边框 */
            border-radius: 10px; /* 圆角 */
            cursor: pointer; /* 鼠标悬停时显示手型 */
          /*text-align: center;*/                                                                           /* 不需要介绍时删除注释 */
            text-decoration: none; /* 去掉下划线 */
            width: 100%; /* 宽度占满父容器 */
            position: relative; /* 相对定位 */
            overflow: hidden; /* 隐藏溢出内容 */
            z-index: -2; /* 设置层级 */
        }
        
        /* 按钮悬停时的背景动画效果 */
        .cydhanniu::before {
            content: ''; /* 伪元素内容为空 */
            position: absolute; /* 绝对定位 */
            top: 0; /* 顶部对齐 */
            left: 0; /* 左侧对齐 */
            width: 0; /* 初始宽度为 0 */
            height: 100%; /* 高度占满父容器 */
            background: #90EE90; /* 背景颜色 */
            transition: width 0.5s ease; /* 宽度变化的过渡效果 */
            z-index: -1; /* 设置层级 */
        }
        
        /* 悬停时背景动画的宽度变化 */
        .cydhanniu:hover::before {
            width: 100%; /* 悬停时宽度变为 100% */
        }

        /* 图片容器样式：设置图标的大小、背景、圆角、间距和旋转动画 */
        .cydhimg-container {
            width: 40px; /* 宽度 */
            height: 40px; /* 高度 */
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: center; /* 水平居中对齐 */
            align-items: center; /* 垂直居中对齐 */
            background-color: #ccc; /* 背景颜色 */
            border-radius: 50%; /* 圆形 */
            margin-right: 10px; /* 右侧间距 */
            transition: transform 1s ease; /* 旋转动画的过渡效果 */
        }
        
        /* 图片样式：设置图片的大小和圆角 */
        .cydhimg-container img {
            width: 60%; /* 宽度占父容器的 60% */
            height: 60%; /* 高度占父容器的 60% */
            object-fit: cover; /* 图片填充方式 */
            border-radius: 10%; /* 圆角 */
        }

        /* 悬停时图片旋转 360 度 */
        .cydhanniu:hover .cydhimg-container {
            transform: rotate(360deg); /* 悬停时旋转 360 度 */
        }
        
        /* 未悬停时图片旋转 -360 度 */
        .cydhanniu:not(:hover) .cydhimg-container {
            transform: rotate(-360deg); /* 未悬停时旋转 -360 度 */
        }

        /* 按钮文本容器样式：设置文本的布局、颜色和对齐方式 */
      /*.cydhanniu span {flex: 1;text-align: left;color: black;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}*/ /* 不需要介绍时删除注释＋删掉下边的3段代码 */
        .cydhanniu .cydhbutton-text {
            display: flex; /* 使用 Flexbox 布局 */
            color: black; /* 文本颜色 */
            flex-direction: column; /* 垂直排列 */
            align-items: flex-start; /* 左对齐 */
            width: calc(100% - 50px); /* 宽度计算 */
            line-height: 1.5; /* 行高 */
        }
        
        /* 网站名称样式：设置字体大小、文本溢出处理 */
        .cydhanniu .cydhbutton-text .cydhwebsite-name {
            font-size: 16px; /* 字体大小 */
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 溢出时显示省略号 */
            width: 100%; /* 宽度占满父容器 */
            text-align: left; /* 左对齐 */
        }
        
        /* 描述文本样式：设置字体大小、颜色和文本溢出处理 */
        .cydhanniu .cydhbutton-text span {
            font-size: 10px; /* 字体大小 */
            color: rgba(0, 0, 0, 0.7); /* 文本颜色 */
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 溢出时显示省略号 */
            width: 100%; /* 宽度占满父容器 */
            text-align: left; /* 左对齐 */
        }

        /* 媒体查询：在大屏幕上每行显示 5 个按钮 */
        @media (min-width: 768px) {
            .cydhanniu {
                width: calc((100% - 40px) / 5); /* 计算每个按钮的宽度 */
            }
        }
        
        /* 媒体查询：在小屏幕上每行显示 2 个按钮 */
        @media (max-width: 767px) {
            .cydhanniu {
                width: calc((100% - 10px) / 2); /* 计算每个按钮的宽度 */
            }
        }

        /* 暗黑主题下的按钮样式 */
        .dark-theme .cydhanniu {
            background-color: rgba(64, 64, 64, 0.8); /* 暗黑主题背景颜色 */
        }
        .dark-theme .cydhanniu .cydhbutton-text {
            color: white; /* 暗黑主题文本颜色 */
        }
        .dark-theme .cydhanniu .cydhbutton-text span {
            color: rgba(255, 255, 255, 0.7); /* 暗黑主题描述文本颜色 */
        }
        .dark-theme .cydhanniu::before {
            background: #006400; /* 暗黑主题悬停背景颜色 */
        }