CSSでRipple Effectのスタイリングをつける

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、CSSでRipple Effectのスタイリングをつけましょう。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

JavaScript版

HTML&JavaScript

スタイリング

cssでスタイリングをしていきます。なお、項目に出てくるbodyやbuttonは、HTMLの要素です。

全体の設定

bodyの設定

buttonの設定

circleの設定

これで、デモのようにRipple Effectがつきます。

おわりに

@keyframestranslate、あとはscaleの使い方がキーですね。

プロパティ値を変えてみて、慣れていってください!

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す