html&css

CSSアニメーションで太陽を作ってみた

html&css

[PR]当サイトはアフィリエイト広告を利用しています。

リスの繁殖シミュレーションの途中ですが、記事を挟みます。

お日様をCSSアニメーションで作成しました。

今回はこの作り方です。

サンプルの動画も載せます。

まずコードを載せます。

サンプルhtmlがこちら。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="stylesheet.css">
    <meta charset="utf-8">
    <title>シルルスのコードおきば例題</title>
  </head>
  <body>
    <h1 class="title">CSSアニメーションで太陽を作ってみよう</h1>
    <div class="wrapper">
      <div class="circle-frame1">
        <div class= "triangle"></div>
      </div>
      <div class="circle-frame2">
        <div class= "triangle"></div>
      </div>
      <div class="circle-frame3">
        <div class= "triangle"></div>
      </div>
      <div class="circle-frame4">
        <div class= "triangle"></div>
      </div>
      <div class="circle-frame5">
        <div class= "triangle"></div>
      </div>
      <div class="circle-frame6">
        <div class= "triangle"></div>
      </div>
      <div class="circle-frame7">
        <div class= "triangle"></div>
      </div>
      <div class="circle-frame8">
        <div class= "triangle"></div>
      </div>
    </div>
  </body>
</html>

htmlだけでは中身がわからないのでCSSを載せます。

参考にしたサイトはこちら。

cly7796.net. “円周上を移動するアニメーションを実装する”. 2019.10.28 (参照2021-06-21)

Takumi Hirashima. “CSS で三角形を作る方法”. Takumi Hirashima Artworks. 最終更新日 2021.04.02 – 公開日 2017.04.20 (参照2021-06-21)

円周場を動くアニメーションと三角形の作り方を参考にしました。

CSSのサンプルが以下。

.title {
  color: #02ccba;
}
.wrapper {
    position: relative;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: orange;
}
.circle-frame1 {
    position: absolute;
    top: -5px;
    left: calc(50% - 10px);
    width: 20px;
    height: calc(50% + 5px);
    transform-origin: center bottom;
    transform: rotate(0deg);
    animation: rotate1 12s linear infinite;
}
@keyframes rotate1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.circle-frame2 {
    position: absolute;
    top: -5px;
    left: calc(50% - 10px);
    width: 20px;
    height: calc(50% + 5px);
    transform-origin: center bottom;
    transform: rotate(45deg);
    animation: rotate2 12s linear infinite;
}
@keyframes rotate2 {
    0% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(405deg);
    }
}
.circle-frame3 {
    position: absolute;
    top: -5px;
    left: calc(50% - 10px);
    width: 20px;
    height: calc(50% + 5px);
    transform-origin: center bottom;
    transform: rotate(90deg);
    animation: rotate3 12s linear infinite;
}
@keyframes rotate3 {
    0% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(450deg);
    }
}
.circle-frame4 {
    position: absolute;
    top: -5px;
    left: calc(50% - 10px);
    width: 20px;
    height: calc(50% + 5px);
    transform-origin: center bottom;
    transform: rotate(135deg);
    animation: rotate4 12s linear infinite;
}
@keyframes rotate4 {
    0% {
        transform: rotate(135deg);
    }
    100% {
        transform: rotate(495deg);
    }
}
.circle-frame5 {
    position: absolute;
    top: -5px;
    left: calc(50% - 10px);
    width: 20px;
    height: calc(50% + 5px);
    transform-origin: center bottom;
    transform: rotate(180deg);
    animation: rotate5 12s linear infinite;
}
@keyframes rotate5 {
    0% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(540deg);
    }
}
.circle-frame6 {
    position: absolute;
    top: -5px;
    left: calc(50% - 10px);
    width: 20px;
    height: calc(50% + 5px);
    transform-origin: center bottom;
    transform: rotate(225deg);
    animation: rotate6 12s linear infinite;
}
@keyframes rotate6 {
    0% {
        transform: rotate(225deg);
    }
    100% {
        transform: rotate(585deg);
    }
}
.circle-frame7 {
    position: absolute;
    top: -5px;
    left: calc(50% - 10px);
    width: 20px;
    height: calc(50% + 5px);
    transform-origin: center bottom;
    transform: rotate(270deg);
    animation: rotate7 12s linear infinite;
}
@keyframes rotate7 {
    0% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(630deg);
    }
}
.circle-frame8 {
    position: absolute;
    top: -5px;
    left: calc(50% - 10px);
    width: 20px;
    height: calc(50% + 5px);
    transform-origin: center bottom;
    transform: rotate(315deg);
    animation: rotate8 12s linear infinite;
}
@keyframes rotate8 {
    0% {
        transform: rotate(315deg);
    }
    100% {
        transform: rotate(675deg);
    }
}
@keyframes stretch {
    0% {
        clip-path: polygon(0 90%, 50% 50%, 100% 90%);
    }
    50% {
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }
    100% {
        clip-path: polygon(0 90%, 50% 50%, 100% 90%);
    }
}
.triangle {
    margin-top: -20px;
    width: 20px;
    height: 20px;
    background-color: #FF6600;
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    animation: stretch 2s linear infinite;
}

長くなりましたが

.wrapperで箱を作って、 .circle-frame1で中心から円周までの棒を作ってそれを回転させる。それから.triangleで三角形を描画しています。

CSSアニメーションであるrotate1で回転、stretchで三角形を大きくしたり小さくしたりしています。

パラメーターは感覚的に決めています。ここをいじったら大きくなったから大きくしてみよう、もっと上だからここのパラメーターを大きく、小さくしてみようくらいの感覚で作りました。あまり詳しい原理はわかっていません。

とりあえず完成品ができればよいです。

パラメーター探索が結構大変でした。

CSSアニメーションは結構面白いです。

他に何か作れたらまた載せるかもしれません。