Question

这可能只是因为它不可能，但这是我的CodePen链接https://codepen.io/Spectral/pen/QgMdbM?editors=1100

我不能使渐变有生命，我做错了什么或这是不可能的？

代码：

    <h1 class='knockout'>This text should be animated!</h1>

    body{background:#fdf}

.knockout{
  margin:50px 0 0 0 auto;
  font-family:sans-serif;
  color:blue;

  /* gradient*/

background: linear-gradient(4deg, #4a6bbd, #b65181, #3c636c);


  /* animation */



-webkit-animation: gradientAnimation 4s ease infinite;
-moz-animation: gradientAnimation 4s ease infinite;
-o-animation: gradientAnimation 4s ease infinite;
animation: gradientAnimation 4s ease infinite;

@-webkit-keyframes gradientAnimation {
    0%{background-position:2% 0%}
    50%{background-position:99% 100%}
    100%{background-position:2% 0%}
}
@-moz-keyframes gradientAnimation {
    0%{background-position:2% 0%}
    50%{background-position:99% 100%}
    100%{background-position:2% 0%}
}
@-o-keyframes gradientAnimation {
    0%{background-position:2% 0%}
    50%{background-position:99% 100%}
    100%{background-position:2% 0%}
}
@keyframes gradientAnimation { 
    0%{background-position:2% 0%}
    50%{background-position:99% 100%}
    100%{background-position:2% 0%}
}
  /* knockout*/
  background-size:cover;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip:text;
  font-size:20vw;
  text-align:center;

  /* stroke*/
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #010;
}

Answer 1

@keyframes {}代码块必须写在.knockout {}代码块之外，而不是在其中。以下是背景渐变工作的示例：

https://codepen.io/anon/pen/PjJoym?editors=1100

（我删除了@ -webkit，@ -moz，@ -o代码以简化此演示）

Answer 2

我不知道这是否正是您所寻找的，而且有点复杂，但我只是将您的代码添加到我现有的样本中。也许你可以用它做点什么，我有点放弃它。

https://codepen.io/MikeIke/pen/xrgvEW

<div class="header">
<h1>Animated Fixed Knockout Text Example(Work In Progress)</h1>
<h3>Scroll down to see</h3>
</div>
<div id="profile">
  <div class="section">
    <div id="knock1">
      <div id="knock2">
        <div class="sectionTitle" id="profileTitle">TEXT</div>
      </div>
    </div>
  </div>
</div>

尝试在CodePen上敲出文本渐变的动画

2 个答案: