【CSSアニメーション】HTMLとCSSだけで作ってみた「扇風機」

17197 ワード
アニメーション HTML CSS 初心者 CSS3 HTML テキストリンク

はじめに

こんにちは。
最近はCSSアニメーションが楽しくて、ハマっています。
今回も、コーラに続き、扇風機を作ってみました！

「扇風機」

See the Pen 扇風機 by みっちー (@michimichix521) on CodePen.

こちらが扇風機とそのプログラムになります。
コードをコピペすると同じように表示できると思います！
扇風機のファンの部分にマウスオンすると(hover)、首を振るようにもしています。

こちらにもコードを記載しておきます。

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>扇風機</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="fan fan-1">
        <div class="core_part">
            <div class="wing wing-1"></div>
            <div class="wing wing-2"></div>
            <div class="wing wing-3"></div>
            <div class="wing wing-4"></div>
            <div class="wing wing-5"></div>
            <div class="wing wing-6"></div>
        </div>
    </div>
    <div class="fan fan-2"></div>
    <div class="fan fan-3">
        <div class="buttons">
            <div class="button"></div>
            <div class="button"></div>
            <div class="button"></div>
            <div class="button"></div>
        </div>
    </div>

</body>
</html>
styles.css
body{
    margin:50px 0 0;
    background-color:antiquewhite;
}

.fan{
    margin:0 auto;
    background-color:black;
}

.fan-1{
    z-index:2;
    width:275px;
    height:275px;
    border:10px solid blue;
    border-radius:50%;
}

.fan-1:hover{
    animation-name:swing;
    animation-duration:5s;
    animation-timing-function:liner;
    animation-iteration-count:infinite;
}

@keyframes swing{
    0%{transform:none;}
    25%{
        transform:rotate(90deg);
        transform:translateX(25px);
    }
    50%{transform:none;}
    75%{
        transform:rotate(-90deg);
        transform:translateX(-25px);
    }
    100%{transform:none;}
}

.core_part{
    margin:0 auto;
    background-color:gainsboro;
    width:50px;
    height:50px;
    border-radius:50%;
    position:relative;
    top:112px;
    opacity:1.0;
    animation-name:rotation;
    animation-duration:0.01s;
    animation-timing-function:liner;
    animation-iteration-count:infinite;
}

.wing{
    margin:0 auto;
    background-color:lightsteelblue;
    width:30px;
    height:100px;
    border-radius:5px;
    position:relative;
}

.wing-1{
    top:50px;
    transform:rotate(0deg);
}

.wing-2{
    right:65px;
    bottom:88px;
    transform:rotate(60deg);
}

.wing-3{
    right:64px;
    bottom:264px;
    transform:rotate(120deg);
}

.wing-4{
    bottom:400px;
    transform:rotate(180deg);
}

.wing-5{
    left:65px;
    bottom:462px;
    transform:rotate(240deg);
}

.wing-6{
    left:65px;
    bottom:488px;
    transform:rotate(300deg);
}

@keyframes rotation{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

.fan-2{
    z-index:1;
    width:50px;
    height:140px;
    border-radius:5px;
    border-top:10px solid blue;
    border-bottom:3px solid dimgray;
    position:relative;
    bottom:10px;
}

.fan-3{
    width:250px;
    height:140px;
    border:5px solid blue;
    border-radius:30px;
    position:relative;
    bottom:35px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.buttons{
    width:100px;
    display:flex;
    justify-content:center;
    justify-content:space-between;
    align-items:center;
}

.button{
    width:15px;
    height:15px;
    background-color:gray;
    border-radius:50%;
}

以上です！
ここまで読んでいただき、ありがとうございました！