制作時間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"});
リンク
この記事が気に入ったらフォロー・シェアしてね！
