GameWithのマスコットをCSSで作ってみる

## GameWith Advent Calendar 2018

この記事は[GameWith Advent Calendar 2018](https://qiita.com/advent-calendar/2018/gamewith) の14日目になります！

## GameWithのマスコットをCSSで作ってみる

今日は[GameWith](https://gamewith.jp/)のマスコットキャラ「すっぴんちゃん」をCSSで作りたいと考えていますが、
そもそもすっぴんちゃんって何？と思われる方もいらっしゃると思いますので、
↓404ページで出てくるこの子のことです！
<img src="https://gamewith.jp/assets/img/404.png" alt="suppin" width="200">

本当に何度見てもかわいくて仕方がないです…！！⁄(⁄ ⁄•⁄-⁄•⁄ ⁄)⁄
では、早速作業を始めましょうー

まずはDOMの部分です。

```html

<div class="suppin">
    <div class="body"></div>
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="hand left"></div>
    <div class="hand right"></div>
    <div class="leg left"></div>
    <div class="leg right"></div>
    <div class="sweat"></div>
</div>
```

次はCSSに行きたいと思いますが、GameWithではふだんlessを利用しているので今回もlessで作りたいですー
まずは基本情報の設定です。

```
@suppinColor:    #37496b;
@suppinSubColor: white;
@suppinSize:     75px;

.suppin {
    position: relative;
    width: @suppinSize;
    height: @suppinSize * 1.5;
}
```

体のコードを追加します。

```
@bodySize:  @suppinSize;

.suppin {
    /*前略*/
    >.body {
        position: absolute;
        left: 50%;
        top: 0;
        margin-left: -1 * @bodySize / 2;
        width: @bodySize; 
        height: @bodySize * 1.25;
        background: @suppinColor;
        border-radius: 50% ~'/' 60% 60% 40% 40%;
    }
}
```
これで体ができました。
<img width="116" alt="屏幕快照 2018-12-10 上午12.39.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/311077/f46679dd-d00d-c99f-1f54-0a6e566e526c.png">
うん…どう見てもたまごですね？！ｱﾚﾚﾚ!?(･_･;?
さ、早速目のコードを追加しましょうー

```
@eyeSize:   @suppinSize * 0.2;

.suppin {
    /*前略*/
    >.eye {
        position: absolute;
        top: @suppinSize * 0.4;
        width: @eyeSize;
        border-style: solid;
        border-color: @suppinSubColor;
        border-width: 0 0 @eyeSize * 0.5 0;
        border-radius: 50% ~'/' 0 0 100% 100%;
        z-index: 1;

        &.left {
            right: 50%;
            margin-right: @eyeSize * 0.1;
            transform: rotate(-45deg);
        }
        &.right {
            left: 50%;
            margin-left: @eyeSize * 0.1;
            transform: rotate(45deg);
        }
    }
}
```
<img width="117" alt="屏幕快照 2018-12-10 上午12.39.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/311077/202efb37-23bc-b109-ea5f-8bc20e4932d1.png">

目を描くと、すっぴんちゃん、なんか悲しい顔でもしていません…？
次、足と手を一気に追加しましょう！

```
@handSize:  @suppinSize * 0.16;
@legSize:   @suppinSize * 0.15;

.suppin {
    /*前略*/
    >.hand {
        position: absolute;
        top: @suppinSize * 0.7;
        width: @handSize;
        height: @handSize * 1.2;
        border-style: solid;
        border-color: @suppinSubColor;
        border-width: @suppinSize * 0.02;
        border-top-width: 0;
        border-radius: 50% ~'/' 0 0 100% 100%;
        z-index: 1;

        &.left {
            left: @suppinSize * 0.08;
            transform: rotate(-35deg);
        }
        &.right {
            right: @suppinSize * 0.08;
            transform: rotate(35deg);
        }
    }

    >.leg {
        position: absolute;
        top: @suppinSize * 1.2;
        width: @legSize * 0.3;
        height: @legSize;  
        border-style: solid;
        border-color: @suppinColor;
        border-radius: @legSize;
        z-index: 1;

        &.left {
            right: 50%;
            margin-right: @suppinSize * 0.05;
            border-width: 0 0 @suppinSize * 0.1 @suppinSize * 0.05;
            transform: skew(-10deg, 55deg);
        }
        &.right {
            left: 50%;
            margin-left: @suppinSize * 0.05;
            border-width: 0 @suppinSize * 0.05 @suppinSize * 0.1 0;
            transform: skew(10deg, -55deg);
        }
    }
}
```
<img width="114" alt="屏幕快照 2018-12-10 上午12.40.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/311077/8d910e24-74f3-56ce-e81f-88275b083364.png">

Done！これですっぴんちゃんができましたー！
汗でも2滴増やしてみよう。(ﾟωﾟ；)

```
@sweatSize: @suppinSize * 0.12;

.suppin {
    /*前略*/
    >.sweat {
        position: absolute;
        right: -1 * @suppinSize * 0.05;
        top: -1 * @suppinSize * 0.05;
        z-index: 1;

        &:before {
            .sweat_drop(@sweatSize);
            top: 0;
            right: 0;
            transform: rotate(45deg);
        }
        &:after {
            .sweat_drop(@sweatSize * 0.6);
            top: @sweatSize * 1.8;
            right: 0;
            transform: rotate(80deg);
        }

        .sweat_drop(@size) {
            position: absolute;
            content: "";
            width: @size;
            height: @size * 1.7;
            border-style: solid;
            border-color: @suppinColor;
            border-width: @suppinSize * 0.03 0 0 @suppinSize * 0.03;
            border-radius: 50% 50% 0 0 ~'/' 50% 50% 0 0;
        }
    }
}
```

<img width="117" alt="屏幕快照 2018-12-10 上午12.40.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/311077/7594ad63-6ce7-c3e5-a939-21b9da3ac87c.png">

せっかくなので、ぷるぷるしている動画効果も入れたいです。

```
.suppin {
    /*前略*/
    @animationDistance: 2px;
    @animationAngle: 3deg;
    @animationDuration: 0.2s;

    animation: purupuru @animationDuration linear infinite alternate;

    @keyframes purupuru {
        25% {
            transform: rotate(@animationAngle);
            top: @animationDistance;
            left: @animationDistance;
        }
        50% {
            top: -1 * @animationDistance;
            left: -1 * @animationDistance;            
        }
        75% {
            transform: rotate(-1 * @animationAngle);
            top: @animationDistance;
            left: @animationDistance;
        }
    }
```

![suppin.gif](https://qiita-image-store.s3.amazonaws.com/0/311077/44327058-7524-d095-a2f0-1beba8826580.gif)

これでぷるぷるしているすっぴんちゃんができましたー！

実はこの↑すっぴんちゃんのslack絵文字スタンプでも存在していて、
いつもスタッフの皆さんに愛用されています。(\*´∀`\*)ｷｭﾝ!

ではでは、今日のブログは以上となります。
GameWithを訪ねるときにこの子と会えましたら、ぜひぜひ可愛がってあげてくださいー！