html - 俗气的文字没有出现
问题描述
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>
解决方案
如果你删除position: absolute;
它会开始反弹
-webkit-animation:colorchange 2s infinite alternate;
它是 20 秒,即 20 秒,所以我将其缩短为 2。更改为你喜欢的 :)
推荐阅读
- r - 重复少数类以达到 60%-40% 的关系
- c# - 获取列表中元素参数的索引
- ios - 更新用户界面 Swift
- android - 如何在下面创建带有菜单的 EditText?
- ios - Sygic :the-resource-could-not-be-loaded 因为应用程序传输安全策略需要使用安全连接
- javascript - Angular 动态组件,在另一个组件之前插入
- javascript - 如何使用我的 css 示例制作单选按钮?js
- python - 如何在python中使用win32在xlsx文件中间插入行
- python - Pandas Dataframe, easier syntax to drop rows by condition on values
- sharepoint - 让用户在线登录共享点