【CSS】晴れの日のアニメーション Beautiful Sunny Day

こんにちは、素人エンジニアです。

今年(2021年)のゴールデンウィークは緊急事態宣言で、外に遊びに行けません。
また、あまり天気も良くないみたいです。

それなら、めっちゃ晴れた日のアニメーション作ろう！

と思って、晴れのアニメーションをcssだけで作成しました。
おうち時間は、CSSアートで遊びましょう！

晴れた日のアニメーション

See the Pen Beautiful Sunny Day by amateur-engineer (@amaeng) on CodePen.

cssだけで作成しています。
太陽や雲、謎の未確認飛行物体も全てcssでデザインしました。
画面サイズに合わせて、大きさも変わるようにしています。

その中でも、太陽が一番凝っていますので、紹介させていただきます！

【CSS】太陽のデザイン

太陽のHTMLとCSSはこんな感じです。

めっちゃ長いので、読み飛ばす人はこちらをクリック

<div class="sun">
  <div class="face">
    <div class="mouth"></div> 
    <ul class="sunbeam">
      <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </ul>   
  </div>
</div>

.sun {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.face {
  position: absolute;
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
  border: 1vmin solid #ffbf7f;
  background: #ffbf7f;
}

.face::before,
.face::after {
  content: "eye";
  color: transparent;
  position: absolute;
  top: 10vmin;
  width: 5vmin;
  height: 5vmin;
  border-radius: 50%;
  border-top: 1vmin solid #99744d;
  border-left: 1vmin solid #99744d;
  border-right: 1vmin solid transparent;
  border-bottom: 1vmin solid transparent;
  transform: rotate(45deg);
}

.face::before {
  left: 4vmin;
}
  
.face::after {
  left: 20vmin;
}

.mouth {
  position: absolute;
  top: 15vmin;
  left: 13vmin;
  width: 5vmin;
  height: 5vmin;
  border-radius: 50%;
  border-top: 1vmin solid transparent;
  border-left: 1vmin solid transparent;
  border-right: 1vmin solid #99744d;
  border-bottom: 1vmin solid #99744d;
  transform: rotate(45deg);
}

.sunbeam {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  top: 18vmin;
  left: 17vmin;
  transform: rotate(0deg);
}

.sunbeam li,
.sunbeam li::before,
.sunbeam li::after {
  width: 6vmin;
  height: 6vmin;
  background: #ffbf7f;
}

.sunbeam li {
  position: absolute;
  border-top-left-radius: 30%;
}

.sunbeam li:nth-child(1) {
  transform: translate(-1vmin, -29vmin) rotate(30deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(2) {
  transform: translate(-3vmin, 22vmin) rotate(-30deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(3) {
  transform: translate(20vmin, -20vmin) rotate(75deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(4) {
  transform: translate(-21vmin, -20vmin) rotate(-15deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(5) {
  transform: translate(24vmin, -3vmin) rotate(0deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(6) {
  transform: translate(-25vmin, -3vmin) rotate(60deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(7) {
  transform: translate(18vmin, 15vmin) rotate(45deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(8) {
  transform: translate(-20vmin, 15vmin) rotate(15deg) skewY(30deg) scaleX(.86666);
}

.sunbeam li::before,
.sunbeam li::after {
  content: "";
  position: absolute;
}

.sunbeam li::before {
  border-top-right-radius: 30%;
  transform: skewX(-45deg) translateX(50%);
}

.sunbeam li::after {
  border-bottom-left-radius: 30%;
  transform: skewY(-45deg) translateY(50%);
}

パーツは大きく分けて、face+mouth（顔のパーツ）、sunbeam（周りにある三角形）の２つがあります。ひとつずつ見て行きましょう！

face＋mouth

border-radius: 50%;で円形に！
vmin : ビューポートの幅と高さのうち、値が小さい方に対する割合
目と口の形は、半円のborderの一部を透明にして作成！

顔の輪郭は、円形にしています。
border-radius: 50%;でまんまるの円になります。
widthとheightには、vminを使用しています。
これで、画面サイズに伴ってサイズが変化します。

.face {
  position: absolute;
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
  border: 1vmin solid #ffbf7f;
  background: #ffbf7f;
}

目と口には、半円を使用しました。
borderの下だけ透明（transparent）にすることで、目と口を表現できます。

半円の作り方は、こちらを参考にしてください。

[CSS] 半円の作り方

こんにちは、素人エンジニアです。 cssだけを使って半円を作る方法を紹介しています。コピペで使ってください！

目はfaceの擬似要素（::beforeと::after）を使っています。

.face::before,
.face::after {
  content: "eye";
  color: transparent;
  position: absolute;
  top: 10vmin;
  width: 5vmin;
  height: 5vmin;
  border-radius: 50%;
  border-top: 1vmin solid #99744d;
  border-left: 1vmin solid #99744d;
  border-right: 1vmin solid transparent;
  border-bottom: 1vmin solid transparent;
  transform: rotate(45deg);
}

.face::before {
  left: 4vmin;
}
  
.face::after {
  left: 20vmin;
}

口は別途クラスを作成しました。

.mouth {
  position: absolute;
  top: 15vmin;
  left: 13vmin;
  width: 5vmin;
  height: 5vmin;
  border-radius: 50%;
  border-top: 1vmin solid transparent;
  border-left: 1vmin solid transparent;
  border-right: 1vmin solid #99744d;
  border-bottom: 1vmin solid #99744d;
  transform: rotate(45deg);
}

sunbeam

角の丸い三角形
ulタグとliタグで量産！
:nth-childで地道に位置調整

太陽の顔周辺には、三角形をいっぱい配置しています。
三角形は、角を丸くしてやわらかい雰囲気にしてみました。

角の丸い三角形の作り方が気になる方は、こちらに作成手順を紹介しています。

角の丸い三角形をCSSのみで作る方法

こんにちは、素人エンジニアです。Webサイトで「三角形」を作るには、borderプロパティを使う方法があります。この方法はとても簡単なのですが、どうしても角ばった図形になってしまいます。では、角の丸い三角形はどうやったら作...

三角形の量産には、リストが便利です！

<ul class="sunbeam">
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

liタグにスタイルを適用させれば、class=”＊＊＊＊”をいっぱい書く必要もありません！

さらに、:nth-childを使えば何番目の要素にどんなスタイルを適用させるか、それぞれ指定できます。

あとは、地道に位置を調整するだけです。

はい、終わり！

ここからは私の努力結晶ですが、見ても見なくても大丈夫です。
調整に調整を重ねています。

.sunbeam {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  top: 18vmin;
  left: 17vmin;
  transform: rotate(0deg);
}

.sunbeam li,
.sunbeam li::before,
.sunbeam li::after {
  width: 6vmin;
  height: 6vmin;
  background: #ffbf7f;
}

.sunbeam li {
  position: absolute;
  border-top-left-radius: 30%;
}

.sunbeam li:nth-child(1) {
  transform: translate(-1vmin, -29vmin) rotate(30deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(2) {
  transform: translate(-3vmin, 22vmin) rotate(-30deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(3) {
  transform: translate(20vmin, -20vmin) rotate(75deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(4) {
  transform: translate(-21vmin, -20vmin) rotate(-15deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(5) {
  transform: translate(24vmin, -3vmin) rotate(0deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(6) {
  transform: translate(-25vmin, -3vmin) rotate(60deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(7) {
  transform: translate(18vmin, 15vmin) rotate(45deg) skewY(30deg) scaleX(.86666);
}
.sunbeam li:nth-child(8) {
  transform: translate(-20vmin, 15vmin) rotate(15deg) skewY(30deg) scaleX(.86666);
}

.sunbeam li::before,
.sunbeam li::after {
  content: "";
  position: absolute;
}

.sunbeam li::before {
  border-top-right-radius: 30%;
  transform: skewX(-45deg) translateX(50%);
}

.sunbeam li::after {
  border-bottom-left-radius: 30%;
  transform: skewY(-45deg) translateY(50%);
}

以上！

リンク