はじめに
こんにちは。
最近は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%;
}
以上です！
ここまで読んでいただき、ありがとうございました！