ドカベン記法
作ろうと思ったら案の定もうあったのでお借りします！
もう6年も経ったんですか……
念のため説明すると「ドカベン」は水島新司による日本の野球漫画であり、このドカベン記法はアニメのオープニング冒頭のタイトルの動きをCSSで再現したものである オープニングテーマ「がんばれドカベン」(第1話～第106話/全163話)
井戸端
nomadoor.icon
Mijinko_SD.icon
code: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);
}
一応縁取りも
これで!消費するのはもったいないかな
code:dokaben-font.css
.line:not(.cursor-line) .deco-\! {
font-weight: bold;
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; }
サンプル描画用
このページにのみ適用される
code:sample.css
@keyframes dokaben {
0% {transform: rotate3d(1,0,0,-90deg);}
100% {transform: rotate3d(1,0,0,0deg);}
}
display:inline-block;
transform-origin:center 90%;
animation: dokaben 2s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:steps(12);
}
font-weight: bold;
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.icon
UserCSS.icon