generated at
ドカベン記法
作ろうと思ったら案の定もうあったのでお借りします!
もう6年も経ったんですか……
念のため説明すると「ドカベン」は水島新司による日本の野球漫画であり、このドカベン記法はアニメのオープニング冒頭のタイトルの動きをCSSで再現したものである
オープニングテーマ「がんばれドカベン」(第1話~第106話/全163話)

井戸端

style.css
@keyframes dokaben { 0% {transform: rotate3d(1,0,0,-90deg);} 100% {transform: rotate3d(1,0,0,0deg);} } .line:not(.cursor-line) .deco-\+ { display:inline-block; transform-origin:center 90%; animation: dokaben 2s; animation-direction:alternate; animation-iteration-count:infinite; animation-timing-function:steps(12); }

一応縁取りも
これで ! 消費するのはもったいないかな
dokaben-font.css
.line:not(.cursor-line) .deco-\! { font-weight: bold; color: #bf2b04; text-shadow:#661600 2px 0px 0px, #661600 1.75517px 0.958851px 0px, #661600 1.0806px 1.68294px 0px, #661600 0.141474px 1.99499px 0px, #661600 -0.832294px 1.81859px 0px, #661600 -1.60229px 1.19694px 0px, #661600 -1.97998px 0.28224px 0px, #661600 -1.87291px -0.701566px 0px, #661600 -1.30729px -1.5136px 0px, #661600 -0.421592px -1.95506px 0px, #661600 0.567324px -1.91785px 0px, #661600 1.41734px -1.41108px 0px, #661600 1.92034px -0.558831px 0px; }

サンプル描画用
このページにのみ適用される
sample.css
@keyframes dokaben { 0% {transform: rotate3d(1,0,0,-90deg);} 100% {transform: rotate3d(1,0,0,0deg);} } #L630529f8f70d950020850261 ~ .line:not(.cursor-line) .deco-\+ { display:inline-block; transform-origin:center 90%; animation: dokaben 2s; animation-direction:alternate; animation-iteration-count:infinite; animation-timing-function:steps(12); } #L630529f8f70d950020850261 ~ .line:not(.cursor-line) .deco-\! { font-weight: bold; color: #bf2b04; text-shadow:#661600 2px 0px 0px, #661600 1.75517px 0.958851px 0px, #661600 1.0806px 1.68294px 0px, #661600 0.141474px 1.99499px 0px, #661600 -0.832294px 1.81859px 0px, #661600 -1.60229px 1.19694px 0px, #661600 -1.97998px 0.28224px 0px, #661600 -1.87291px -0.701566px 0px, #661600 -1.30729px -1.5136px 0px, #661600 -0.421592px -1.95506px 0px, #661600 0.567324px -1.91785px 0px, #661600 1.41734px -1.41108px 0px, #661600 1.92034px -0.558831px 0px; }

Settings
UserCSS