ドカベン記法
作ろうと思ったら案の定もうあったのでお借りします！
もう6年も経ったんですか……
オープニングテーマ「がんばれドカベン」(第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;
}