CSS3 的动画应用

目的

需要强调一些文字
如果是每次一个提示框或者加粗加大的字体,用户不觉得框新鲜后,自然就会忽略掉

思路

以下代码都是在 chrome 中调试的

1. 利用 CSS3 的动画
2. 红底蓝字?蓝底红字?既然要追求 刺激 闪瞎狗眼,那就贯彻到底咯

demo1

先来个简单的 红底蓝字/蓝底红字 切换

  .text {
    font-size: 10rem;
    animation: shine 0.1s infinite;
  }

  @keyframes shine {
    from {
      background-color: #f00;
      color: #00f;
    }

    to {
      color: #f00;
      background-color: #00f;
    }
  }

8行了,要瞎了

demo2

弄点人间的颜色

  .text {
    font-size: 10rem;
    background-image: -webkit-linear-gradient(45deg, #39c5bb, #bdbf78);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s infinite;
  }

  @keyframes shine {
    from {
      -webkit-filter: hue-rotate(0deg);
    }

    to {
      -webkit-filter: hue-rotate(-360deg);
    }
  }