霜染枫丹 发表于 2025-12-9 22:13

马老师的代码这样用色彩仍然完美显示

本帖最后由 霜染枫丹 于 2025-12-9 22:30 编辑 <br /><br /><style>
    @keyframes sweep {
      0%   { background-position: -100% 0; }
      100% { background-position: 100% 0; }
    }

    .title-container {
      width: 800px;
      margin: 30px auto;
      text-align: center;
    }

    .main-title {
      font: bold 2.5em sans-serif;
      color: #333;
      margin: 0 0 10px 0;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    }

    .sub-title {
      font: 1.2em sans-serif;
      color: #666;
      margin: 0 0 20px 0;
      letter-spacing: 2px;
    }

    .txtbox {
      margin: 20px auto;
      width: 740px;
      height: 300px;
      /* 改为90度渐变 */
      background: linear-gradient(90deg,
            #1a237e 0%,
            #1a237e 50%,
            #36caf9 50.5%,
            #36caf9 100%);
      background-size: 200% 100%;
      animation: sweep 3s infinite alternate;
      border: 1px solid gray;
      font: bold 4em sans-serif;
      display: grid;
      place-items: center;
      position: relative;
    }

    .txtbox p {
      mix-blend-mode: difference;
      animation: colorChange 3s infinite alternate;
      position: relative;
      z-index: 2;
    }

    @keyframes colorChange {
      0%   { color: #fff; }
      50%{ color: #000; }
      100% { color: #fff; }
    }
</style>

<div class="title-container">
    <h1 class="main-title">人生哲理系列</h1>
    <h2 class="sub-title">大道至简 · 黑白分明</h2>
    <div class="txtbox">
      <p>自古黑白两分明</p>
    </div>
</div>

霜染枫丹 发表于 2025-12-9 22:18

马老师是36度D 的斜线分割，我还没弄懂36度回扫怎么实现{:5_102:}，只好先90度往返都一样，这组代码潜力无限，特别喜欢，对我很有用。

霜染枫丹 发表于 2025-12-9 22:20

本帖最后由 霜染枫丹 于 2025-12-9 22:31 编辑 <br /><br />

红影 发表于 2025-12-9 23:38

枫丹的学习很会举一反三，厉害了{:4_199:}

梦江南 发表于 2025-12-10 11:37

这样来回扫也很有意思。赞！{:4_199:}

霜染枫丹 发表于 2025-12-11 09:55

红影 发表于 2025-12-9 23:38
枫丹的学习很会举一反三，厉害了

红影上午好！这组代码我特别喜欢，犹如一片沃土，怎样耕种都是会硕果累累{:4_204:}

霜染枫丹 发表于 2025-12-11 09:57

梦江南 发表于 2025-12-10 11:37
这样来回扫也很有意思。赞！

有个有角度回扫我在学一下，谢梦江南的支持，上午好~~{:4_204:}
页: [1]
查看完整版本: 马老师的代码这样用色彩仍然完美显示