问俗语文未出现
EN

Stack Overflow用户

提问于 2018-06-20 16:48:42

回答 1查看 26关注 0票数 0

新的HTML/CSS -试图使一个闪烁，弹跳，彩虹标题的生命，“可怕的文本”，但它只是看起来空白。基于这里的示例，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>

html

css

webkit

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-20 16:52:01

如果你移除position: absolute;，它就会开始弹跳

  -webkit-animation:colorchange 2s infinite alternate;

它是20秒，所以我把它缩短到2，换到你喜欢的:)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50953317

复制

相似问题

问俗语文未出现
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问俗语文未出现EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问俗语文未出现
EN