今回はバブル風背景を作ってみました！
<div style="background-color: #ADD8E6; padding: 50px; border-radius: 10px; position: relative;">
<p>浮遊するバブルエフェクトの内容</p>
<div style="position: absolute; top: 10px; left: 50px; background-color: rgba(255, 255, 255, 0.7); width: 30px; height: 30px; border-radius: 50%;"></div>
<div style="position: absolute; top: 70px; left: 120px; background-color: rgba(255, 255, 255, 0.5); width: 40px; height: 40px; border-radius: 50%;"></div>
<div style="position: absolute; top: 120px; right: 30px; background-color: rgba(255, 255, 255, 0.4); width: 50px; height: 50px; border-radius: 50%;"></div>
</div>
浮遊するバブルエフェクトの内容
色を変えてカラーバリエーションを作ってみます。
ピンク系
<div style="background-color: #f5ecf4; padding: 50px; border-radius: 10px; position: relative;">
<p>浮遊するバブルエフェクトの内容</p>
<div style="position: absolute; top: 10px; left: 50px; background-color: rgba(255, 255, 255, 0.7); width: 30px; height: 30px; border-radius: 50%;"> </div>
<div style="position: absolute; top: 70px; left: 120px; background-color: rgba(255, 255, 255, 0.5); width: 40px; height: 40px; border-radius: 50%;"> </div>
<div style="position: absolute; top: 120px; right: 30px; background-color: rgba(255, 255, 255, 0.4); width: 50px; height: 50px; border-radius: 50%;"> </div>
</div>
浮遊するバブルエフェクトの内容
緑系
<div style="background-color: #c1d8ac; padding: 50px; border-radius: 10px; position: relative;">
<p>浮遊するバブルエフェクトの内容</p>
<div style="position: absolute; top: 10px; left: 50px; background-color: rgba(255, 255, 255, 0.7); width: 30px; height: 30px; border-radius: 50%;"> </div>
<div style="position: absolute; top: 70px; left: 120px; background-color: rgba(255, 255, 255, 0.5); width: 40px; height: 40px; border-radius: 50%;"> </div>
<div style="position: absolute; top: 120px; right: 30px; background-color: rgba(255, 255, 255, 0.4); width: 50px; height: 50px; border-radius: 50%;"> </div>
</div>
浮遊するバブルエフェクトの内容
オレンジ系
<div style="background-color: #fad09e; padding: 50px; border-radius: 10px; position: relative;">
<p>浮遊するバブルエフェクトの内容</p>
<div style="position: absolute; top: 10px; left: 50px; background-color: rgba(255, 255, 255, 0.7); width: 30px; height: 30px; border-radius: 50%;"> </div>
<div style="position: absolute; top: 70px; left: 120px; background-color: rgba(255, 255, 255, 0.5); width: 40px; height: 40px; border-radius: 50%;"> </div>
<div style="position: absolute; top: 120px; right: 30px; background-color: rgba(255, 255, 255, 0.4); width: 50px; height: 50px; border-radius: 50%;"> </div>
</div>
浮遊するバブルエフェクトの内容
部分的な模様を入れるには、position: relative;とposition: absolute;を組み合わせて使えばいいみたいですね！
ちょっと水玉を移動してみます。
<div style="position: absolute; top: 10px; left: 50px; background-color: rgba(255, 255, 255, 0.7); width: 30px; height: 30px; border-radius: 50%;"> </div>
<div style="position: absolute; top: 30px; right: 90px; background-color: rgba(255, 255, 255, 0.5); width: 40px; height: 40px; border-radius: 50%;"> </div>
<div style="position: absolute; top: 120px; right: 30px; background-color: rgba(255, 255, 255, 0.4); width: 50px; height: 50px; border-radius: 50%;"> </div>
</div>
浮遊するバブルエフェクトの内容
背景色を変えたい場合はこちらを参考に。
ドジャース今日も勝ちましたね！
とうとうワールドシリーズ制覇に王手をかけるところまできました。
でも今日の大谷選手はやっぱり昨日の怪我の影響のせいか動きに精彩を欠いていたような気がします。
大舞台で活躍する大谷選手を見られるのはうれしいけど、怪我で今後を心配する状況にはなってほしくなかったなあ、というのが本音ですね。。。
