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

GameWith Advent Calendar 2018

この記事はGameWith Advent Calendar 2018 の14日目になります！

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

今日はGameWithのマスコットキャラ「すっぴんちゃん」をCSSで作りたいと考えていますが、
そもそもすっぴんちゃんって何？と思われる方もいらっしゃると思いますので、
↓404ページで出てくるこの子のことです！

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

まずはDOMの部分です。

<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%;
    }
}

これで体ができました。

うん…どう見てもたまごですね？！ｱﾚﾚﾚ!?(･_･;?
さ、早速目のコードを追加しましょうー

@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);
        }
    }
}

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

@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);
        }
    }
}

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;
        }
    }
}

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

.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;
        }
    }

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

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

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