HTML / CSS的新功能-尝试使闪烁的,跳动的彩虹标题栩栩如生,“ Awesome Text”,但它只是空白。基于此处的示例https://codepen.io/raaasin/pen/quvHr

任何想法出了什么问题?只要我删除CSS颜色更改元素,它就可以工作。



<head>
  <title>This is awesome</title>
  <style>
    .awesome {

      font-family: futura;
      font-style: italic;

      width:100%;

      margin: 0 auto;
      text-align: center;

      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; }
    }
  </style>

</head>

<body onload="blink();">

<html>
<body style="background-color:black;">
<font color="green">

<marquee direction="down" width="1000" height="100" behavior="alternate">
  <marquee behavior="alternate">
    <h1><div id="blinking"><p class="awesome">Awesome Text</p></div></h1>
  </marquee>
</marquee>


</font>
</html>

<script>


function blink() {
    var f = document.getElementById('blinking');
    setInterval(function() {
        f.style.display = (f.style.display == 'none' ? '' : 'none');
    }, 300);
}

</script>

最佳答案

如果您删除position: absolute;,它将开始反弹

  -webkit-animation:colorchange 2s infinite alternate;


那是20秒,也就是20秒,所以我将其缩短为2。更改为您喜欢的:)

关于html - 粘性文字未出现,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50953317/

10-11 23:25
查看更多