Question

正文中有 h1 标记某些文字Hello Hello Text 。

但是错过执行 Hello 这个词时。的为什么吗

在 view-source：上显示已写入单词。

如何解决？

.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*background-color: red*/
}
.clr {
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 30s infinite linear;
}
@-webkit-keyframes hue {
    from {
      -webkit-filter: hue-rotate(0deg);
    }   
    to {
      -webkit-filter: hue-rotate(360deg);
    }
}
.awesome {     
      font-family: futura;
      font-style: italic;
      color:#313131;
      font-size:45px;
      font-weight: bold;
      position: absolute;
      -webkit-animation:colorchange 20s infinite alternate;
    }
    @-webkit-keyframes colorchange {
      0% {   
        color: blue;
      }
      10% { 
        color: #8e44ad;
      }
      20% { 
        color: #1abc9c;
      }
      30% { 
        color: #d35400;
      }
      40% { 
        color: blue;
      }
      50% { 
        color: #34495e;
      }
      60% { 
        color: blue;
      }
      70% {
        color: #2980b9;
      }
      80% {
        color: #f1c40f;
      }
      90% {
        color: #2980b9;
      }
      100% {
        color: pink;
      }
    }

<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class=""><div class="container"><br /><br /><center><b><h2 class="clr">नमस्ते</h2><br /><h1 class="clr">Some Text <span class="awesome">HELLO</span> Some Text</h1></b></center></div></body></html>

正文中有 h1 标记某些文字Hello Hello Text 。

但是错过执行 Hello 这个词时。的为什么吗

在 view-source：上显示已写入单词。

如何解决？

The Tidy Js fiddle

Answer 1

只需删除.awesome的绝对位置

<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class=""><div class="container"><br /><br /><center><b><h2 class="clr">नमस्ते</h2><br /><h1 class="clr">Some Text <span class="awesome">HELLO</span> Some Text</h1></b></center></div></body></html>

Schema

Answer 2

NN_BUS上有position:absolute;。如果删除它，您将看到文本。

Answer 3

.awesome {     
      font-family: futura;
      font-style: italic;
      color:#313131;
      font-size:45px;
      font-weight: bold;    
      -webkit-animation:colorchange 20s infinite alternate;
    }

替换它在此我删除了位置：绝对;

Answer 4

首先，您必须更正标记，因为您有过时的标记，并且不使用绝对位置。然后简单地将text-fill放回到初始值。

.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*background-color: red*/
}

.clr {
  text-align:center;
  font-weight:bold;
  color: #f35626;
  background-image:linear-gradient(92deg, #f35626, #feab3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hue 30s infinite linear;
}

@keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
  }
}

.awesome {
  font-family: futura;
  font-style: italic;
  color: #313131;
  font-size: 45px;
  font-weight: bold;
    -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  animation: colorchange 20s infinite alternate;
}

@keyframes colorchange {
  0% {
    color: blue;
  }
  10% {
    color: #8e44ad;
  }
  20% {
    color: #1abc9c;
  }
  30% {
    color: #d35400;
  }
  40% {
    color: blue;
  }
  50% {
    color: #34495e;
  }
  60% {
    color: blue;
  }
  70% {
    color: #2980b9;
  }
  80% {
    color: #f1c40f;
  }
  90% {
    color: #2980b9;
  }
  100% {
    color: pink;
  }
}

<div class="container">
    <h2 class="clr">नमस्ते</h2>
    <h1 class="clr">Some Text <span class="awesome">HELLO</span> Some Text</h1>
  </div>

应用某些css后不显示文本

4 个答案: