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;
它是 20s，也就是 20 秒，所以我将它缩短为 2。更改为你喜欢的:)
关于html - 粘性文本未出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50953317/