基于CodePen代码：如何在Wix中将CSS嵌入HTML？

嘿，我太懂这种把本地/CodePen里好好的代码放到Wix就出问题的挫败感了——Wix的编辑器对自定义HTML/CSS有不少特殊限制，咱们一步步拆解解决你的问题！

先理清你的核心问题根源 #

你遇到的「文字变列表、无效链接、背景色异常」，大概率是这几个原因：

• 没有用完整的HTML结构包裹代码，导致Wix自动补全了错误的标签（比如把纯文本误解析成<li>）
• 用了<link>引入外部CSS，Wix的嵌入HTML模块对外部资源加载有限制
• 样式选择器冲突，被Wix的全局样式覆盖了

给你一套Wix兼容的完整解决方案 #

直接用下面的代码替换你当前的嵌入内容，就能实现「无限滚动+鼠标悬停描边」的效果，我已经适配了Wix的规则：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    /* 滚动容器：控制滚动区域的背景和范围 */
    .custom-scroll-container {
      width: 100%;
      overflow: hidden;
      background-color: #ffffff; /* 这里设置你想要的背景色 */
      padding: 8px 0;
    }

    /* 滚动文本：基础样式+动画 */
    .custom-scroll-text {
      display: inline-block;
      font-size: 22px;
      color: #2d2d2d; /* 初始文本颜色 */
      white-space: nowrap;
      animation: smooth-scroll 18s linear infinite;
    }

    /* 悬停描边效果 */
    .custom-scroll-text:hover {
      -webkit-text-stroke: 1px #ff4757; /* 描边颜色+宽度，可自行调整 */
      color: transparent; /* 若想保留原文本颜色，删掉这行即可 */
      transition: all 0.3s ease; /* 描边效果平滑过渡 */
    }

    /* 无限滚动动画 */
    @keyframes smooth-scroll {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  </style>
</head>
<body>
  <div class="custom-scroll-container">
    <div class="custom-scroll-text">这里替换成你的无限滚动文本内容，不用担心会被解析成链接～</div>
  </div>
</body>
</html>

操作步骤（确保在Wix里正确生效） #

1. 在Wix编辑器里添加「嵌入HTML」模块（左侧面板 → 添加 → 嵌入 → HTML代码）
2. 点击「编辑代码」，把上面的完整代码粘贴进去
3. 替换掉.custom-scroll-text里的文本内容，调整CSS里的颜色、字号、动画时长等参数
4. 保存后预览页面，应该就能看到正常效果了

额外避坑提示 #

• 不要用<link>引入外部CSS：Wix的嵌入模块会阻止部分跨域资源，直接把CSS写在<style>标签里最稳妥
• 避免Wix自动解析链接：如果你的文本里有类似网址的内容，只要是在完整的HTML结构里，Wix就不会自动把它转成超链接
• 解决样式冲突：如果还是被Wix的全局样式覆盖，可以给容器加个唯一ID（比如<div id="unique-scroll-box" class="custom-scroll-container">），然后用#unique-scroll-box .custom-scroll-text这种高优先级选择器写样式

我之前在Wix里折腾自定义代码时也踩过好多类似的坑，从最小的可运行示例开始测试，一步步调整参数，很快就能搞定啦！

内容的提问来源于stack exchange，提问作者Em Erdmann