「疫病が流行ったら私を描きなさい」
と言われているそうなので、CSSでアマビエを描いてみました。
できた画像
色みは画像検索で出てきた参考画像で可愛かった組み合わせにしてます。
ちょっとファンシー。
できたコード
index.html
<pclass="amabie"><spanclass="eki">疫</span><spanclass="byo">病</span><spanclass="tai">退</span><spanclass="san">散</span></p>style.css
.amabie{margin:5emauto;padding:0;position:relative;width:280px;height:600px;text-indent:-9999px;border-radius:100px100px00;}.amabiespan{display:block;text-indent:-9999px;position:absolute;}.amabie.eki{/* 髪 左側 */content:'';display:block;width:230px;height:480px;position:absolute;top:-20px;left:-40px;border-radius:100px120px00;background-color:#eec6f5;z-index:30;}.amabie.byo{/* 顔 */width:280px;height:200px;background-color:#faebd6;border-radius:100px100px00;position:absolute;top:0;left:0;z-index:50;}.amabie.byo:before{/* 唇 */content:'';display:block;width:60px;height:40px;position:absolute;top:110px;left:-35px;z-index:55;background-image:linear-gradient(180deg,#faebd60,#faebd660%,transparent60%,transparent72%,#faebd672%);border-radius:30px;}.amabie.byo:after{/* 目 */content:'';display:block;width:45px;height:50px;position:absolute;top:90px;left:30px;z-index:55;background-image:radial-gradient(ellipse,#fff0,#fff70%,transparent70%),linear-gradient(50deg,transparentcalc(25%-1px),#444calc(25%-1px),#444calc(25%+1px),transparentcalc(25%+1px),transparentcalc(75%-1px),#444calc(75%-1px),#444calc(75%+1px),transparentcalc(75%+1px)),linear-gradient(-50deg,transparentcalc(25%-1px),#444calc(25%-1px),#444calc(25%+1px),transparentcalc(25%+1px),transparentcalc(75%-1px),#444calc(75%-1px),#444calc(75%+1px),transparentcalc(75%+1px)),radial-gradient(ellipse,#4440,#44470%,transparent70%);background-size:5px7px,45px50px,45px50px,15px25px;background-position:40%40%,centercenter,centercenter,centercenter;background-repeat:no-repeat;}.amabie.tai{/* 耳 */width:40px;height:90px;position:absolute;top:60px;left:125px;z-index:65;background-image:linear-gradient(-210deg,transparent49%,#67c5db50%,#67c5db55%,#9added60%),linear-gradient(210deg,#9added49%,#67c5db50%,#67c5db55%,transparent60%),linear-gradient(-180deg,#9added42%,#67c5db50%,#67c5db58%,#9added60%);background-size:50px40px,50px40px,50px30px;background-position:righttop,rightbottom,rightcenter;background-repeat:no-repeat;}.amabie.tai:before{/* 髪 右側 */content:'';display:block;width:270px;height:480px;position:absolute;top:-80px;right:-140px;border-radius:100px120px00;background:linear-gradient(180deg,#eec6f550%,transparent100%),linear-gradient(180deg,transparent40%,#eec6f590%),linear-gradient(90deg,transparent0,transparent54%,#eec6f555%,#eec6f567%,#d7a2e067.5%,#d7a2e068.5%,#eec6f569%,#eec6f577%,#d7a2e077.5%,#d7a2e078.5%,#eec6f579%,#eec6f587%,#d7a2e087.5%,#d7a2e088.5%,#eec6f589%),radial-gradient(circleatbottomleft,transparent40%,#eec6f540%);background-position:155px0,155px330px,bottomleft,0-100px;background-size:130px150px,130px150px,270px420px,270px250px;background-repeat:no-repeat;z-index:100;}.amabie.tai:after{/* 身体 */content:'';display:block;width:280px;height:310px;position:absolute;top:140px;left:-125px;z-index:55;background-color:#9added;background-image:linear-gradient(180deg,#9added0,#9added50%,transparent50%),radial-gradient(ellipseattopcenter,transparent0,transparentcalc(70%-3px),#67c5db70%,transparent70%);background-size:35px50px,35px25px;}.amabie.san{/* 足 中央 */width:100px;height:160px;position:absolute;bottom:-40px;left:90px;z-index:60;background-image:linear-gradient(-180deg,transparent0,#9added20%,#9added84%,transparent100%),radial-gradient(circleatbottomcenter,transparent40%,#faebd640%,#faebd670%,#9added100%),radial-gradient(circleatbottomcenter,transparent40%,#faebd640%,#faebd670%,#9added100%);background-size:100px130px,50px50px,50px50px;background-position:righttop,leftbottom,rightbottom;background-repeat:no-repeat;border-radius:10px;transform:rotate(-1deg);}.amabie.san:before{/* 足 左 */content:'';display:block;width:100px;height:160px;position:absolute;bottom:5px;left:-99px;z-index:58;background-image:linear-gradient(-180deg,transparent0,#9added20%,#9added84%,transparent100%),radial-gradient(circleatbottomcenter,transparent40%,#faebd640%,#faebd670%,#9added100%),radial-gradient(circleatbottomcenter,transparent40%,#faebd640%,#faebd670%,#9added100%);background-size:100px130px,50px50px,50px50px;background-position:righttop,leftbottom,rightbottom;background-repeat:no-repeat;border-radius:10px;transform:rotate(12deg);}.amabie.san:after{/* 足 右 */content:'';display:block;width:100px;height:160px;position:absolute;bottom:5px;right:-100px;z-index:58;background-image:linear-gradient(-180deg,transparent0,#9added20%,#9added84%,transparent100%),radial-gradient(circleatbottomcenter,transparent40%,#faebd640%,#faebd670%,#9added100%),radial-gradient(circleatbottomcenter,transparent40%,#faebd640%,#faebd670%,#9added100%);background-size:100px130px,50px50px,50px50px;background-position:righttop,leftbottom,rightbottom;background-repeat:no-repeat;border-radius:10px;transform:rotate(-9deg);}/* アニメーション */.amabie:after{content:'';display:block;width:600px;height:600px;position:absolute;top:-70px;right:-150px;z-index:20;}.amabie:hover:after{background-image:radial-gradient(circleclosest-side,#fff40%,#fff5a870%,#fff5a880%,transparent100%);background-position:lefttop;background-repeat:no-repeat;animation:anime13slinear.1sinfinite;}.amabie:hover.san{animation:anime23slinear.1sinfinite;}@keyframesanime1{0%{transform:scale(1,1);}30%{transform:scale(.7,.7);}70%{transform:scale(1.2,1.2);}100%{transform:scale(1,1);}}@keyframesanime2{0%{transform:rotate(-1deg);left:90px;bottom:-40px;}30%{transform:rotate(-4deg);left:93px;bottom:-35px;}70%{transform:rotate(4deg);left:85px;bottom:-35px;}100%{transform:rotate(-1deg);left:90px;bottom:-40px;}}一番難しかったのは、身体のウロコ模様ですね。
倍サイズの半分ベタで、円形の一部を隠すことで実現してます。
background-imageは最初に描いたオブジェクトが一番上になるのを覚えておくと便利です。
hoverで後光が入り、足が動くアニメーションをつけました。radial-gradientのいろんな可能性を見出した感じがします。
実際のサンプル
See the Pen amabie - CSSDrawing by Mei Koutsuki (@mei331) on CodePen.