CSS3で風車を作ってみた #CSS3

HTMLとCSS3で風車を作りました。
使用ブラウザ：Chrome バージョン44

HTML

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="index.css">
  <title>風車を作ってみた</title>
</head>
<body>
<div id="windmill">
  <div id="wing1">
    <div class="parts pattern1"></div>
    <div class="parts pattern2"></div>
    <div class="parts pattern3"></div>
  </div>

  <div id="wing2">
    <div class="parts pattern4"></div>
    <div class="parts pattern5"></div>
    <div class="parts pattern6"></div>
  </div>

</body>
</html>

CSS

index.css


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,body{
  height: 100%;
  background: #001E43; /* Midnight Blue */
}

#windmill{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.parts{
  width: 20px;
  height: 20px;
  border-radius: 100%;
  animation: turn 5s infinite linear;
}

.pattern1{
  background: #55BEFC;
  box-shadow: 
    0 -300px 0 0 #55BEFC,
    0 -270px 0 0 #55BEFC,
    0 -240px 0 0 #55BEFC,
    0 -210px 0 0 #55BEFC,
    0 -180px 0 0 #55BEFC,
    0 -150px 0 0 #55BEFC,
    0 -120px 0 0 #55BEFC,
    0  -90px 0 0 #55BEFC,
    0  -60px 0 0 #55BEFC,
    0  -30px 0 0 #55BEFC,
    0   30px 0 0 #55BEFC,
    0   60px 0 0 #55BEFC,
    0   90px 0 0 #55BEFC,
    0  120px 0 0 #55BEFC,
    0  150px 0 0 #55BEFC,
    0  180px 0 0 #55BEFC,
    0  210px 0 0 #55BEFC,
    0  240px 0 0 #55BEFC,
    0  270px 0 0 #55BEFC,
    0  300px 0 0 #55BEFC;
}

.pattern2{
  background: #BEFC55;
  box-shadow:
    0 -300px 0 0 #BEFC55,
    0 -270px 0 0 #BEFC55,
    0 -240px 0 0 #BEFC55,
    0 -210px 0 0 #BEFC55,
    0 -180px 0 0 #BEFC55,
    0 -150px 0 0 #BEFC55,
    0 -120px 0 0 #BEFC55,
    0  -90px 0 0 #BEFC55,
    0  -60px 0 0 #BEFC55,
    0  -30px 0 0 #BEFC55,
    0   30px 0 0 #BEFC55,
    0   60px 0 0 #BEFC55,
    0   90px 0 0 #BEFC55,
    0  120px 0 0 #BEFC55,
    0  150px 0 0 #BEFC55,
    0  180px 0 0 #BEFC55,
    0  210px 0 0 #BEFC55,
    0  240px 0 0 #BEFC55,
    0  270px 0 0 #BEFC55,
    0  300px 0 0 #BEFC55;
}

.pattern3{
  background: #EE6E73;
  box-shadow:
    0 -300px 0 0 #EE6E73,
    0 -270px 0 0 #EE6E73,
    0 -240px 0 0 #EE6E73,
    0 -210px 0 0 #EE6E73,
    0 -180px 0 0 #EE6E73,
    0 -150px 0 0 #EE6E73,
    0 -120px 0 0 #EE6E73,
    0  -90px 0 0 #EE6E73,
    0  -60px 0 0 #EE6E73,
    0  -30px 0 0 #EE6E73,
    0   30px 0 0 #EE6E73,
    0   60px 0 0 #EE6E73,
    0   90px 0 0 #EE6E73,
    0  120px 0 0 #EE6E73,
    0  150px 0 0 #EE6E73,
    0  180px 0 0 #EE6E73,
    0  210px 0 0 #EE6E73,
    0  240px 0 0 #EE6E73,
    0  270px 0 0 #EE6E73,
    0  300px 0 0 #EE6E73;
}
.pattern4{
  background: #FFB74C;
  box-shadow:
    -300px 0 0 0 #FFB74C,
    -270px 0 0 0 #FFB74C,
    -240px 0 0 0 #FFB74C,
    -210px 0 0 0 #FFB74C,
    -180px 0 0 0 #FFB74C,
    -150px 0 0 0 #FFB74C,
    -120px 0 0 0 #FFB74C,
     -90px 0 0 0 #FFB74C,
     -60px 0 0 0 #FFB74C,
     -30px 0 0 0 #FFB74C,
      30px 0 0 0 #FFB74C,
      60px 0 0 0 #FFB74C,
      90px 0 0 0 #FFB74C,
     120px 0 0 0 #FFB74C,
     150px 0 0 0 #FFB74C,
     180px 0 0 0 #FFB74C,
     210px 0 0 0 #FFB74C,
     240px 0 0 0 #FFB74C,
     270px 0 0 0 #FFB74C,
     300px 0 0 0 #FFB74C;
}
.pattern5{
  background: #FFFFFF;
  box-shadow:
    -300px 0 0 0 #FFFFFF,
    -270px 0 0 0 #FFFFFF,
    -240px 0 0 0 #FFFFFF,
    -210px 0 0 0 #FFFFFF,
    -180px 0 0 0 #FFFFFF,
    -150px 0 0 0 #FFFFFF,
    -120px 0 0 0 #FFFFFF,
     -90px 0 0 0 #FFFFFF,
     -60px 0 0 0 #FFFFFF,
     -30px 0 0 0 #FFFFFF,
      30px 0 0 0 #FFFFFF,
      60px 0 0 0 #FFFFFF,
      90px 0 0 0 #FFFFFF,
     120px 0 0 0 #FFFFFF,
     150px 0 0 0 #FFFFFF,
     180px 0 0 0 #FFFFFF,
     210px 0 0 0 #FFFFFF,
     240px 0 0 0 #FFFFFF,
     270px 0 0 0 #FFFFFF,
     300px 0 0 0 #FFFFFF;
}

.pattern6{
  background: #FFAEC9;
  box-shadow:
    -300px 0 0 0 #FFAEC9,
    -270px 0 0 0 #FFAEC9,
    -240px 0 0 0 #FFAEC9,
    -210px 0 0 0 #FFAEC9,
    -180px 0 0 0 #FFAEC9,
    -150px 0 0 0 #FFAEC9,
    -120px 0 0 0 #FFAEC9,
     -90px 0 0 0 #FFAEC9,
     -60px 0 0 0 #FFAEC9,
     -30px 0 0 0 #FFAEC9,
      30px 0 0 0 #FFAEC9,
      60px 0 0 0 #FFAEC9,
      90px 0 0 0 #FFAEC9,
     120px 0 0 0 #FFAEC9,
     150px 0 0 0 #FFAEC9,
     180px 0 0 0 #FFAEC9,
     210px 0 0 0 #FFAEC9,
     240px 0 0 0 #FFAEC9,
     270px 0 0 0 #FFAEC9,
     300px 0 0 0 #FFAEC9;
}

@keyframes turn{
  from{
    transform: rotate(0deg);
  }

  to{
    transform: rotate(360deg);
  }
}

CSS3で風車を作ってみた

HTML

CSS

作ったもの