どうも！LSSです！！
にて、いかにもな手抜きキャラを描きましたが、それにちょっと手を加えました。
（いかに手をかけずに…と考えていたのにそれに反するかのようなｗ）
これで完成ってことにしてもいいかな？
キャラクター
今回はアニメーションしません。
スイッチ迷路のキャラとして使うつもりですが、そこでもアニメーションはせずに、手足だけ交互のパターンを一歩ごとに切り替えようかと考えています。
コード
<style>
.test1,.test2,.test3,.test4{
display:inline-block;
border:1px solid black;
width:54px;
height:54px;
background-repeat:no-repeat;
}
.test1{
background:
radial-gradient(7px 5px at 20px 23px,#ffffff 84%,#000000 85% 99%,#00000000 100%),
radial-gradient(7px 5px at 34px 23px,#ffffff 84%,#000000 85% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffff 10%,#eeee00 80% 92%,#000000 93% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 15px 40px,#ffff80 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffff80 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffff 10%,#eeee00 80% 92%,#000000 93% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 39px 40px,#ffff80 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffff80 80%,#000000 81% 99%,#00000000 100%)
;
}
.test2{
background:
radial-gradient(5px 7px at 27px 20px,#ffffff 10%,#eeee00 80% 87%,#000000 88% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffff 10%,#eeee00 80% 92%,#000000 93% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 15px 40px,#ffff80 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffff80 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffff 10%,#eeee00 80% 92%,#000000 93% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 39px 40px,#ffff80 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffff80 80%,#000000 81% 99%,#00000000 100%)
;
}
.test3{
background:
radial-gradient(5px 7px at 13px 20px,#ffffff 10%,#eeee00 80% 87%,#000000 88% 99%,#00000000 100%),
radial-gradient(7px 5px at 34px 23px,#ffffff 84%,#000000 85% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffff 10%,#eeee00 80% 92%,#000000 93% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 15px 40px,#ffff80 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffff80 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffff 10%,#eeee00 80% 92%,#000000 93% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 39px 40px,#ffff80 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffff80 80%,#000000 81% 99%,#00000000 100%)
;
}
.test4{
background:
radial-gradient(5px 7px at 41px 20px,#ffffff 10%,#eeee00 80% 87%,#000000 88% 99%,#00000000 100%),
radial-gradient(7px 5px at 20px 23px,#ffffff 84%,#000000 85% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffff 10%,#eeee00 80% 92%,#000000 93% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 15px 40px,#ffff80 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffff80 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffff 10%,#eeee00 80% 92%,#000000 93% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 39px 40px,#ffff80 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffff80 80%,#000000 81% 99%,#00000000 100%)
;
}
</style>
<div class="test1"> </div>
<div class="test2"> </div>
<div class="test3"> </div>
<div class="test4"> </div>
問題点と解決について
【CSS】いかに手をかけずに、CSSで歩くキャラクターを描くか
の段階で、いくつかの問題点が見つかりました。
まず、iPhoneで正常に表示されない件については、keyframesの中でイメージを設定していたのですが、普通に指定すると普通に表示されました。
…またしてもiPhone特有のクセが見つかったようですねｗ
次に、あまりにもドラえもんっぽい件について。
いくらか試行錯誤しましたが、結局「目を横長楕円にする」というところに落ち着きました。
それでも後ろ姿がまだドラえもんっぽかったですｗ
最後に、個性について。
別に無くてもいいか、とも思ったのですが、ちょっとひと手間かけて、「後頭部になにか」をつけました^^
後頭部につける事で、前述の「後ろ姿が…」の点もあわせて解決！ですね^^
命名発表！
そうして出来たデザインから、このキャラの「名前」を思いつきました。
内心、
【CSS】とことこ歩く（はためく改変）【おまけ：異様に苦労した別バージョン】
【CSS】３種の背景画像を重ねて個別に動かすアニメーション
のキャラと（ちょっと見た目違うけど）同一キャラという事にしようか…とも思っていたのですが、その案は没にします。
命名…「アナツくん」です！
お見知りおきのほど、よろしくお願いいたしますm(__)m
なお、「アナツくん」という名は略称で、正式名称は
「アタマニ・ナンカ・ツイテンデ」ですが、「アナツくん」と呼んでやってください。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
