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/