帮我写一个代码雨的HTML文件
时间: 2023-08-28 21:29:12 浏览: 43
好的,以下是一个简单的代码雨的HTML文件示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code Rain</title>
<style>
/* CSS to create the code rain animation */
body {
background-color: black;
overflow: hidden;
}
.code-rain {
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(transparent 80%, #0f0f0f 80%);
animation: codeRain 1s linear infinite;
}
@keyframes codeRain {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100vh);
}
}
.code {
position: absolute;
font-size: 16px;
color: #00ff00;
text-shadow: 0 0 10px #00ff00;
opacity: 0.8;
animation: code 5s linear infinite;
}
@keyframes code {
0% {
left: -5%;
}
100% {
left: 105%;
}
}
</style>
</head>
<body>
<div class="code-rain"></div>
<div class="code">
<p>// This is some code rain</p>
<p><span class="keyword">for</span> (<span class="variable">let</span> <span class="variable-name">i</span> = <span class="number">0</span>; <span class="variable-name">i</span> < <span class="number">100</span>; <span class="variable-name">i</span>++) {</p>
<p> <span class="function">console</span>.<span class="function-name">log</span>(<span class="string">'Code rain is cool!'</span>);</p>
<p>}</p>
</div>
</body>
</html>
```
这个HTML文件包含一个黑色背景和一个代码雨效果。代码雨效果由两个CSS动画实现:`codeRain`用于让代码雨滑落,`code`用于让代码水平移动。其中,`.code-rain`是用来创建代码雨背景的,`.code`是用来放置代码的。在`.code`中,代码被放置在`<p>`标签中,并用CSS样式进行高亮显示。其中,`.keyword`、`.variable`、`.variable-name`、`.number`、`.function`和`.function-name`是CSS类,用于分别标记代码中的关键字、变量、变量名、数字、函数和函数名,以实现高亮显示。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)