8192.jp

CSSだけでスパイファミリーのアーニャちゃんを作ってみた

Web制作 2022/06/26 2022/06/26

制作時間4時間超えです。ちなみにPureCSSですがclip-pathは未使用。アーニャCSSが好き!

目次

    とりあえず完成品

    See the Pen Pure CSS アーニャ by Leo_8192 (@Leo_8192) on CodePen.

    割と可愛く作れて草。

    大きいアーニャちゃん

    .sf_container1{ display: flex; align-items: center; position: relative; height: 500px; } .base1{ position: absolute; top: 150px; left: 50%; transform: translatex(-50%) scale(1.1); margin: 0 auto; border-radius: 50%; width: 240px; height: 200px; } .base2{ position: absolute; top: 150px; left: 50%; transform: translatex(-50%) scale(0.2); margin: 0 auto; border-radius: 50%; width: 240px; height: 200px; } .skin{ position: absolute; top: 18px; left: 50%; transform: translatex(-50%); border-radius: 40% 40% 44% 44%; width: 240px; height: 195px; background: #FBE9DB; } .hair_base{ position: absolute; top: -84px; left: 50%; transform: translatex(-50%); margin: 50px auto 0; border-bottom: none; border-radius: 110px 110px 0 0; width: 200px; height: 80px; background: #F8B5AC; } .hair_ahoge{ position: absolute; top: -63px; left: 114px; transform: translatex(-50%) rotate(-8deg); border-bottom: none; border-radius: 0 40px 0 40px; width: 20px; height: 40px; background: #F8B5AC; } .hair_left_1{ position: absolute; top: -87px; left: 16px; transform: translatex(-50%) rotate(28deg); margin: 50px auto 0; border-bottom: none; border-radius: 100% 0% 0% 100% / 25% 0% 100% 75% ; width: 50px; height: 240px; background: #F8B5AC; } .hair_left_2{ position: absolute; top: 165px; left: 25px; transform: translatex(-50%) rotate(-114deg); border-bottom: none; border-radius: 100px 100px 0 0; width: 100px; height: 40px; background: #F8B5AC; } .hair_left_3{ position: absolute; top: 128px; left: 10px; transform: translatex(-50%) rotate(-10deg); border-bottom: none; border-radius: 50% 50% 0% 100% / 25% 100% 0% 75% ; width: 60px; height: 120px; background: #F8B5AC; } .hair_left_4{ position: absolute; top: 100px; left: 19px; transform: translatex(-50%) rotate(-86deg); border-bottom: none; width: 90px; height: 30px; background: #F8B5AC; } .hair_left_5{ position: absolute; top: 125px; left: 19px; transform: translatex(-50%) rotate(-95deg); border-bottom: none; width: 90px; height: 30px; background: #F8B5AC; } .hair_right_1{ position: absolute; top: -87px; left: 226px; transform: translatex(-50%) rotate(-28deg); margin: 50px auto 0; border-bottom: none; border-radius: 0% 100% 100% 0% / 100% 25% 75% 0% ; width: 50px; height: 240px; background: #F8B5AC; } .hair_right_2{ position: absolute; top: 165px; left: 215px; transform: translatex(-50%) rotate(114deg); margin: 0; border-bottom: none; border-radius: 100px 100px 0 0; width: 100px; height: 40px; background: #F8B5AC; } .hair_right_3{ position: absolute; top: 128px; left: 230px; transform: translatex(-50%) rotate(10deg); border-bottom: none; border-radius: 50% 50% 100% 0% / 100% 25% 75% 0% ; width: 60px; height: 120px; background: #F8B5AC; } .hair_right_4{ position: absolute; top: 100px; right: -71px; transform: translatex(-50%) rotate(86deg); border-bottom: none; width: 90px; height: 30px; background: #F8B5AC; } .hair_right_5{ position: absolute; top: 125px; left: 220px; transform: translatex(-50%) rotate(95deg); border-bottom: none; width: 90px; height: 30px; background: #F8B5AC; } .bangs{ position: absolute; background: #F8B5AC; } .hair_bangs_1{ top: 50px; left: 32px; transform: translatex(-50%) rotate(86deg); border-radius: 120px 120px 0 0; width: 60px; height: 24px; } .hair_bangs_2{ top: 40px; left: 53px; transform: translatex(-50%) rotate(-86deg); border-radius: 120px 120px 0 0; width: 60px; height: 24px; } .hair_bangs_3{ top: 20px; left: 77px; transform: translatex(-50%) rotate(0deg); border-bottom: none; border-radius: 0 100% 0 100% / 0 0 100% 100%; width: 30px; height: 70px; } .hair_bangs_4{ top: 30px; left: 100px; transform: translatex(-50%) rotate(-12deg); border-bottom: none; border-radius: 0 100% 0 100% / 0 0 100% 100%; width: 30px; height: 70px; } .hair_bangs_5{ top: 20px; left: 117px; transform: translatex(-50%) rotate(-10deg); border-bottom: none; border-radius: 0 100% 0 100% / 0 0 100% 100%; width: 38px; height: 70px; } .hair_bangs_6{ top: 20px; left: 147px; transform: translatex(-50%) rotate(-10deg); border-bottom: none; border-radius: 0 100% 0 100% / 0 0 100% 100%; width: 32px; height: 70px; } .hair_bangs_7{ top: 20px; left: 182px; transform: translatex(-50%) rotate(-14deg); border-radius: 0 100% 0 100% / 0 0 100% 100%; width: 52px; height: 70px; } .hair_bangs_8{ top: 20px; left: 200px; transform: translatex(-50%) rotate(-14deg); border-radius: 0 100% 100% 0 / 0 0 100% 100%; width: 32px; height: 70px; } .tuno_left{ overflow: hidden; position: absolute; z-index: -1; top: 10px; left: -12px; transform: rotate(-18deg); border-radius: 10%; background: #322D27; width: 60px; height: 60px; } .tuno_right{ overflow: hidden; position: absolute; z-index: -1; top: 10px; left: 196px; transform: rotate(18deg); border-radius: 10%; background: #322D27; width: 60px; height: 60px; } .tuno_pat{ position: absolute; bottom: 30px; left: 0; transform: translatex(-50%) rotate(-45deg); width: 80px; height: 25px; background-image: radial-gradient( #C2B874 70%, transparent 50% ); background-size: 12px 6px; background-position: bottom center; background-repeat : repeat-x; } .tuno_left .tuno_pat{ bottom: 35px; left: 15px; transform: translatex(-50%) rotate(-45deg); } .tuno_right .tuno_pat{ bottom: 35px; left: 42px; transform: translatex(-50%) rotate(45deg); } .eye_left{ overflow: hidden; position: absolute; top: 116px; left: 38px; border: 2px solid #000; border-radius: 50% 50% 0% 100% / 100% 100% 0% 0% ; width: 58px; height: 7px; background: #fff; } .eye_left_top{ position: absolute; top: 110px; left: 80px; transform: rotate(15deg); border-top: 2px solid rgba(0,0,0,0.5); border-radius: 50%; width: 22px; height: 6px; } .eyebrows_left{ position: absolute; top: 66px; left: 60px; transform: rotate(-2deg); border-top: 2px solid #945A53; border-radius: 50%; width: 36px; height: 6px; } .eye_right{ overflow: hidden; position: absolute; top: 116px; right: 38px; border: 2px solid #000; border-radius: 50% 50% 0% 100% / 100% 100% 0% 0% ; width: 58px; height: 7px; background: #fff; } .eye_right_top{ position: absolute; top: 110px; left: 138px; transform: rotate(-15deg); border-top: 2px solid rgba(0,0,0,0.5); border-radius: 50%; width: 22px; height: 6px; } .eyebrows_right{ position: absolute; top: 66px; left: 145px; transform: rotate(2deg); border-top: 2px solid #945A53; border-radius: 50%; width: 36px; height: 6px; } .eye_ball{ position: absolute; top: -10px; transform: translatex(-50%); border-radius: 50%; width: 25px; height: 25px; background: #2C443E; } .eye_left .eye_ball{ left: 55%; } .eye_right .eye_ball{ left: 45%; } .mouth_2{ position: absolute; top: 172px; left: 50%; transform: translatex(-50%); border: 2px solid #000; border-radius: 0 0 50% 50% / 0 0 100% 100%; width: 72px; height: 8px; background: #fff; } .nose{ position: absolute; top: 142px; left: 50%; transform: translatex(-50%); width: 2px; height: 3px; background: #000; } .cheek_1{ position: absolute; top: 142px; left: 40px; width: 40px; height: 6px; background: repeating-linear-gradient(70deg, #F8B5AC, #F8B5AC 2px, transparent 2px, transparent 5px); } .cheek_2{ position: absolute; top: 142px; left: 158px; width: 40px; height: 6px; background: repeating-linear-gradient(70deg, #F8B5AC, #F8B5AC 2px, transparent 2px, transparent 5px); }

    うーん、かわいい。

    小さいアーニャちゃん

    .sf_container2{ display: flex; align-items: center; position: relative; height: 200px; } .base2{ position: absolute; top: 0; left: 50%; transform: translatex(-50%) scale(0.2); margin: 0 auto; border-radius: 50%; width: 240px; height: 200px; }

    小さくてもかわいい。

    高速移動アーニャちゃん

    .sf_container3{ display: flex; justify-content: center; align-items: center; position: relative; height: 300px; } .base3{ position: absolute; top: -80px; left: 50%; transform: translatex(-50%) scale(0.5); margin: 0 auto; border-radius: 50%; width: 240px; height: 200px; } .anm1{animation: anime1 0.16s linear infinite;} @keyframes anime1 { 0% {transform: translateX(-150px);} 50% {transform: translateX(150px);} 100% {transform: translateX(-150px);} }

    はやい。

    震えるアーニャちゃん

    .sf_container4{ display: flex; justify-content: center; align-items: center; position: relative; height: 300px; } .base4{ position: absolute; top: -80px; left: 50%; transform: translatex(-50%) scale(0.7); margin: 0 auto; border-radius: 50%; width: 240px; height: 200px; } .anm2{animation: anime2 0.1s linear infinite;} @keyframes anime2 { 0%{transform: rotate(0deg) translate(0, 0)scale(0.7);} 12.5%{transform: rotate(0.6deg) translate(2px, -2px)scale(0.75);} 25%{transform: rotate(8deg) translate(0px, 2px)scale(0.8);} 37.5%{transform: rotate(0.6deg) translate(-2px, 0)scale(0.75);} 50%{transform: rotate(0deg) translate(0, 0)scale(0.7);} 62.5%{transform: rotate(-0.6deg) translate(2px, 0)scale(0.75);} 75%{transform: rotate(-8deg) translate(0, 2px)scale(0.8);} 87.5%{transform: rotate(-0.6deg) translate(-2px, -2px)scale(0.75);} 100%{transform: rotate(0deg) translate(0, 0)scale(0.3);} }

    落ち着いてほしい。

    アーニャちゃんの作り方

    これいる?

    <div class="sf_container">
    	<div class="sf_wrap">
    		<div class="sf">SPY×FAMILY</div>
    	</div>
    	<div class="base">
    		<div class="skin"></div>
    		<div class="hair_base"></div>
    		<div class="hair_ahoge"></div>
    		<div class="hair_left_1"></div>
    		<div class="hair_left_2"></div>
    		<div class="hair_left_3"></div>
    		<div class="hair_left_4"></div>
    		<div class="hair_left_5"></div>
    		<div class="hair_right_1"></div>
    		<div class="hair_right_2"></div>
    		<div class="hair_right_3"></div>
    		<div class="hair_right_4"></div>
    		<div class="hair_right_5"></div>
    		<div class="hair_bangs_1 bangs"></div>
    		<div class="hair_bangs_2 bangs"></div>
    		<div class="hair_bangs_3 bangs"></div>
    		<div class="hair_bangs_4 bangs"></div>
    		<div class="hair_bangs_5 bangs"></div>
    		<div class="hair_bangs_6 bangs"></div>
    		<div class="hair_bangs_7 bangs"></div>
    		<div class="hair_bangs_8 bangs"></div>
    		<div class="tuno_left">
    			<div class="tuno_pat"></div>
    		</div>
    		<div class="tuno_right">
    			<div class="tuno_pat"></div>
    		</div>
    		<div class="eye_left">
    			<div class="eye_ball"></div>
    		</div>
    		<div class="eye_left_top"></div>
    		<div class="eyebrows_left"></div>
    		<div class="eye_right">
    			<div class="eye_ball"></div>
    		</div>
    		<div class="eye_right_top"></div>
    		<div class="eyebrows_right"></div>
    		<div class="mouth_1"></div>
    		<div class="mouth_2"></div>
    		<div class="nose"></div>
    		<div class="cheek_1"></div>
    		<div class="cheek_2"></div>
    	</div>
    </div>

    CSSは長すぎるので割愛。ただのゴリ押しです。

    最後に

    CSSだけで割と何でも作れるから、みんなもPureCSSアートで遊ぼうね!

    (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a]||function(){arguments.currentScript=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d=c.createElement(f),d.src=g, d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink"); msmaflink({"n":"ねんどろいど SPY x FAMILY アーニャ フォージャー ノンスケール プラスチック製 塗装済み可動フィギュア","b":"グッドスマイルカンパニー(GOOD SMILE COMPANY)","t":"G12951","d":"https:\/\/m.media-amazon.com","c_p":"\/images\/I","p":["\/41CD2KgcL8L._SL500_.jpg","\/51UOoFftKzL._SL500_.jpg","\/51y1ddOhTAL._SL500_.jpg","\/51emD1TogOL._SL500_.jpg","\/51JmSFhVFoL._SL500_.jpg","\/51UQ5wWhKtL._SL500_.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/dp\/B0B3N1KXLK","t":"amazon","r_v":""},"v":"2.1","b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https:\/\/www.amazon.co.jp\/dp\/B0B3N1KXLK","a_id":916058,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https:\/\/search.rakuten.co.jp\/search\/mall\/%E3%81%AD%E3%82%93%E3%81%A9%E3%82%8D%E3%81%84%E3%81%A9%20SPY%20x%20FAMILY%20%E3%82%A2%E3%83%BC%E3%83%8B%E3%83%A3%20%E3%83%95%E3%82%A9%E3%83%BC%E3%82%B8%E3%83%A3%E3%83%BC%20%E3%83%8E%E3%83%B3%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB%20%E3%83%97%E3%83%A9%E3%82%B9%E3%83%81%E3%83%83%E3%82%AF%E8%A3%BD%20%E5%A1%97%E8%A3%85%E6%B8%88%E3%81%BF%E5%8F%AF%E5%8B%95%E3%83%95%E3%82%A3%E3%82%AE%E3%83%A5%E3%82%A2\/","a_id":916056,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2}],"eid":"Biqsy","s":"s"});