Skip to content

Commit 9222109

Browse files
humensmochumensmoc
committed
更新：meta效果教程
1 parent d049e78 commit 9222109

File tree

2 files changed

+189
-0
lines changed

2 files changed

+189
-0
lines changed

‎blog/meta-html-tutorial.html‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
<!DOCTYPE html>
2+
<html lang="zh">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>HTML元编程效果教程 - humensmoc</title>
7+
<link rel="stylesheet" href="/css/main.css">
8+
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
9+
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
10+
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
11+
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
12+
<link rel="manifest" href="/images/favicon/site.webmanifest">
13+
<link rel="shortcut icon" href="/images/favicon/favicon.ico">
14+
<style>
15+
.tutorial-container {
16+
max-width: 800px;
17+
margin: 0 auto;
18+
padding: 40px 20px;
19+
line-height: 1.8;
20+
}
21+
.meta-section {
22+
margin-bottom: 40px;
23+
padding: 20px;
24+
background: #f8f9fa;
25+
border-radius: 10px;
26+
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
27+
}
28+
.code-block {
29+
background: #f1f1f1;
30+
padding: 15px;
31+
border-radius: 5px;
32+
overflow-x: auto;
33+
font-family: monospace;
34+
margin: 15px 0;
35+
}
36+
.demo-box {
37+
border: 2px dashed #666;
38+
padding: 20px;
39+
margin: 20px 0;
40+
border-radius: 5px;
41+
background: #fff;
42+
}
43+
.meta-title {
44+
font-size: 1.5em;
45+
color: #333;
46+
margin-bottom: 15px;
47+
padding-bottom: 10px;
48+
border-bottom: 2px solid #eee;
49+
}
50+
.note-box {
51+
background: #fff3cd;
52+
border-left: 4px solid #ffc107;
53+
padding: 15px;
54+
margin: 20px 0;
55+
}
56+
.meta-effect {
57+
font-family: monospace;
58+
color: #666;
59+
}
60+
.glitch-text {
61+
position: relative;
62+
animation: glitch 1s infinite;
63+
}
64+
@keyframes glitch {
65+
0% { transform: none; opacity: 1; }
66+
7% { transform: skew(-0.5deg, -0.9deg); opacity: 0.75; }
67+
10% { transform: none; opacity: 1; }
68+
27% { transform: none; opacity: 1; }
69+
30% { transform: skew(0.8deg, -0.1deg); opacity: 0.75; }
70+
35% { transform: none; opacity: 1; }
71+
52% { transform: none; opacity: 1; }
72+
55% { transform: skew(-1deg, 0.2deg); opacity: 0.75; }
73+
50% { transform: none; opacity: 1; }
74+
72% { transform: none; opacity: 1; }
75+
75% { transform: skew(0.4deg, 1deg); opacity: 0.75; }
76+
80% { transform: none; opacity: 1; }
77+
100% { transform: none; opacity: 1; }
78+
}
79+
</style>
80+
</head>
81+
<body>
82+
<div class="nav-buttons" style="padding: 20px;">
83+
<a href="/newblog.html" class="nav-button">
84+
<i class="fa fa-arrow-left"></i> 返回博客
85+
</a>
86+
<a href="/" class="nav-button">
87+
<i class="fa fa-home"></i> 返回主页
88+
</a>
89+
</div>
90+
91+
<div class="tutorial-container">
92+
<h1 class="glitch-text">HTML元编程效果教程</h1>
93+
94+
<div class="meta-section">
95+
<h2 class="meta-title">1. 显示HTML标签</h2>
96+
<p>要在页面中显示HTML标签，我们需要将特殊字符转换为HTML实体：</p>
97+
<div class="code-block">
98+
&lt; 转换为 &amp;lt;<br>
99+
&gt; 转换为 &amp;gt;<br>
100+
&amp; 转换为 &amp;amp;
101+
</div>
102+
103+
<div class="demo-box">
104+
<p>示例效果：</p>
105+
<p>&lt;h1&gt;这是一个标题&lt;/h1&gt;</p>
106+
<p>&lt;p&gt;这是一个段落&lt;/p&gt;</p>
107+
</div>
108+
</div>
109+
110+
<div class="meta-section">
111+
<h2 class="meta-title">2. 创建元标签效果</h2>
112+
<p>我们可以使用CSS和HTML创建一些有趣的元编程效果：</p>
113+
114+
<div class="demo-box">
115+
<p class="meta-effect">&lt;正在加载页面...&gt;</p>
116+
<p class="meta-effect">&lt;检测到用户输入&gt;</p>
117+
<p class="meta-effect">&lt;渲染DOM树&gt;</p>
118+
</div>
119+
120+
<div class="code-block">
121+
.meta-effect {
122+
font-family: monospace;
123+
color: #666;
124+
}
125+
</div>
126+
</div>
127+
128+
<div class="meta-section">
129+
<h2 class="meta-title">3. 故障效果文本</h2>
130+
<p>使用CSS动画创建故障效果：</p>
131+
132+
<div class="demo-box">
133+
<p class="glitch-text">这是一段故障效果文本</p>
134+
</div>
135+
136+
<div class="code-block">
137+
.glitch-text {
138+
position: relative;
139+
animation: glitch 1s infinite;
140+
}
141+
142+
@keyframes glitch {
143+
0% { transform: none; }
144+
7% { transform: skew(-0.5deg, -0.9deg); }
145+
10% { transform: none; }
146+
/* ... 更多关键帧 ... */
147+
}
148+
</div>
149+
</div>
150+
151+
<div class="meta-section">
152+
<h2 class="meta-title">4. 代码注释效果</h2>
153+
<div class="demo-box">
154+
<p class="meta-effect">/* 这是一段模拟的代码注释 */</p>
155+
<p class="meta-effect">// 这是一行单行注释</p>
156+
<p class="meta-effect">&lt;!-- 这是HTML注释 --&gt;</p>
157+
</div>
158+
</div>
159+
160+
<div class="meta-section">
161+
<h2 class="meta-title">5. 实用技巧</h2>
162+
<div class="note-box">
163+
<ul>
164+
<li>使用 <code>pre</code> 标签保留代码格式</li>
165+
<li>使用等宽字体提升代码可读性</li>
166+
<li>添加适当的空格和缩进</li>
167+
<li>使用CSS美化代码显示效果</li>
168+
</ul>
169+
</div>
170+
</div>
171+
</div>
172+
</body>
173+
</html>

‎newblog.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,22 @@ <h2 class="post-title">Unity WebGL游戏上传教程</h2>
105105
阅读全文 <i class="fa fa-arrow-right"></i>
106106
</a>
107107
</div>
108+
109+
<div class="blog-post">
110+
<h2 class="post-title">HTML元编程效果教程</h2>
111+
<div class="post-meta">
112+
<i class="fa fa-calendar"></i> 2024-01-03
113+
<span class="tag"><i class="fa fa-tag"></i> 教程</span>
114+
<span class="tag"><i class="fa fa-code"></i> HTML</span>
115+
<span class="tag"><i class="fa fa-css3"></i> CSS</span>
116+
</div>
117+
<div class="post-preview">
118+
探索如何在网页中展示HTML代码，以及创建各种有趣的元编程视觉效果，包括故障文本、代码注释等效果...
119+
</div>
120+
<a href="/blog/meta-html-tutorial.html" class="read-more">
121+
阅读全文 <i class="fa fa-arrow-right"></i>
122+
</a>
123+
</div>
108124

109125
<!-- 可以在这里添加更多博客文章 -->
110126
</div>

0 commit comments

Comments
 (0)