夏の風物詩の一つ、音色を楽しむ風鈴(ふうりん)をCSSで作ってみた

#どうも7noteです。夏の風物詩、風鈴(ふうりん)を作ってみた。

だんだんと暑い日が続く中、チリーンというあの音が聞こえてくると、「あぁ、今年も夏が始まったんだな」と思います。

そんな夏の風物詩である風鈴(ふうりん)をCSSで作ってみました。

あんまり関係ないですが、四季を表現しているホームページっておしゃれでとても好きです。

ソース

index.html

<div class="windbell">
  <div class="glass"></div>
  <div class="zetsu"></div>
</div>

style.css

.windbell {
  width: 150px;
}

.windbell .glass {
  width: 100%;
  height: 140px;
  background: linear-gradient(#ABCDE7, #FFF);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
}

.windbell .glass::before {
  content: '';
  width: 80%;
  height: 15px;
  border: solid 3px #ABCDE7;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  margin: auto;
}

.zetsu {
  width: 50px;
  height: 200px;
  background: linear-gradient(20deg, #75C4B3, #B6DFF0);
  margin: 0 auto;
  transform: skew(-3deg, -5deg) translate(-5px);
  position: relative;
}

.zetsu::before {
  content: '';
  width: 50px;
  border-top: 2px solid #ccc;
  position: absolute;
  top: -10px;
  transform: rotate(93deg);
}

まとめ

CSSで風鈴を作りました。
CSSアニメーションと組み合わせて動きを入れてもいいかもしれませんね。

室内での開発でも熱中症には気をつけてお過ごしください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ