Replace typewriter cursor with CSS blink animation for poet field

This commit is contained in:
2026-05-14 02:11:50 +08:00
parent 680f10b66a
commit e965204401
3 changed files with 43 additions and 29 deletions
+15 -2
View File
@@ -78,8 +78,18 @@ html.dark .theme-toggle-light {
display: none; display: none;
} }
/* Typewriter cursor blink */ /* Vim-style block cursor via ::after */
@keyframes tk-blink { #typewriter-text::after {
content: "";
display: inline-block;
width: 0.6em;
height: 1.1em;
background: #999;
vertical-align: text-bottom; transform: translateY(-2px);
margin-left: 1px;
animation: vim-blink 0.8s step-end infinite;
}
@keyframes vim-blink {
0%, 0%,
100% { 100% {
opacity: 1; opacity: 1;
@@ -88,3 +98,6 @@ html.dark .theme-toggle-light {
opacity: 0; opacity: 0;
} }
} }
.dark #typewriter-text::after {
background: #ccc;
}
+4 -2
View File
@@ -3,6 +3,10 @@ title: "极简主义的实用指南:少即是多"
date: 2026-05-12T17:00:00+08:00 date: 2026-05-12T17:00:00+08:00
draft: false draft: false
description: "极简不等于空无一物。从手机关通知、统一信息入口、减少收藏即学到,到物品的一年法则和精神层面的少承诺、少比较、少内耗,一套可立刻上手的实用方法。" description: "极简不等于空无一物。从手机关通知、统一信息入口、减少收藏即学到,到物品的一年法则和精神层面的少承诺、少比较、少内耗,一套可立刻上手的实用方法。"
poet: "驾驶教练机拉杆起飞的那一刻
宇治城的小溪边被斜阳刺痛双眼的那一刻
在广汕国道上骑自行车听到路旁大爷大喊加油的那一刻
我清楚的感受到我是我自己"
tags: tags:
- 极简 - 极简
- 生活 - 生活
@@ -41,5 +45,3 @@ tags:
- **少内耗** — 纠结 5 分钟还没决定的事,说明选哪个都行 - **少内耗** — 纠结 5 分钟还没决定的事,说明选哪个都行
--- ---
极简不是目的,是手段。腾出空间和精力,才能放在真正重要的事情上。
+6 -7
View File
@@ -42,17 +42,14 @@
</div> </div>
<div class="content"> <div class="content">
{{ .Content }} {{ .Content }}
</div>
<div class="hx:mt-16 hx:py-8 hx:px-4 hx:border-t hx:border-neutral-200 hx:dark:border-neutral-800" id="typewriter-box" style="opacity:0;transition:opacity .6s"> {{- with .Params.poet }}
<p class="hx:text-base hx:leading-8 hx:text-gray-500 hx:dark:text-gray-400 hx:whitespace-pre-wrap"> <div id="typewriter-box" style="opacity:0;transition:opacity .6s">
<span id="typewriter-text"></span><span id="typewriter-cursor" style="display:inline-block;width:2px;height:1.1em;background:#999;vertical-align:middle;margin-left:1px;animation:tk-blink .8s step-end infinite"></span> <p id="typewriter-text"></p>
</p>
</div> </div>
<script> <script>
(function(){ (function(){
var p=["驾驶教练机拉杆起飞的那一刻","宇治城的小溪边被斜阳刺痛双眼的那一刻","在广汕国道上骑自行车听到路旁大爷大喊加油的那一刻","我清楚的感受到我是我自己"]; var all=`{{ . }}`;
var all="";p.forEach(function(l,i){all+=l;if(i<p.length-1)all+="\n"});
var i=0,del=false,dc=0; var i=0,del=false,dc=0;
var te=document.getElementById("typewriter-text"); var te=document.getElementById("typewriter-text");
var box=document.getElementById("typewriter-box"); var box=document.getElementById("typewriter-box");
@@ -69,6 +66,8 @@
},del?55+Math.random()*30:70+Math.random()*100)} },del?55+Math.random()*30:70+Math.random()*100)}
})(); })();
</script> </script>
{{- end }}
</div>
{{- partial "components/last-updated.html" . -}} {{- partial "components/last-updated.html" . -}}
{{- if (site.Params.blog.article.displayPagination | default true) -}} {{- if (site.Params.blog.article.displayPagination | default true) -}}