文字にアニメーション・バウンドボタンに影はつけられますか？

  • P

    こんにちは。
    バウンドするボタンがありますが、あのように文字をバウンドさせたり、流れさせたり、アニメーションをつけることはできますか？

    もしできるとしたら、やり方・アニメーションの種類を教えて頂けると助かります。

    また、バウンドボタンを立体的に（影があるように）することはできますか？

    よろしくお願い致します。

    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :

    0 1 件の返信

  • @phoo さん

    こんにちは！
    ご質問ありがとうございます。

    アニメーションについては、CSSで再現する形ですと
    こちらの記事あたりが参考になると思います！
    https://ui-hack.com/programming/html_css/css_textanimation/
    https://1-notes.com/css-bound-animation/

    バウンドボタンは既に薄い影がついていますが、
    どういった影のことでしょうか...？？

    お手数おかけしますが、ご確認お願いいたします！

    0
  • P

    ご返信ありがとうございます！

    アニメーションの参考記事ありがとうございます。試してみます。

    ボタンは添付画像のように、立体的に影を付けたいです。
    お手数ですがよろしくお願い致します。0_1708564120762_rapture_20240222100719.png

    0 1 件の返信

  • @phoo さん

    単純に影とつける形ですと、以下のようなCSSを使いますが、
    色とかを調整しないと楕円形のボタンだと綺麗に見えないかもしれません。。

    box-shadow: 0 4px 0 #ccc;

    ※「#ccc」の部分にお好きな色のカラーコードを入れてください
    ⠀
    ⠀
    もともとついている影を濃くしたければ以下のようなイメージになります。

    box-shadow: 0px 5px 15px -5px #000;

    box-shadowの考え方は、こちらの記事が参考になると思います！
    https://saruwakakun.com/html-css/basic/box-shadow

    ご確認お願いいたします！

    0
  • P

    ご回答ありがとうございます！
    記事を見ながら実践してみます。
    お調べいただきありがとうございましたm(__)m

    0 1 件の返信

  • @phoo さん

    いえいえ、参考になりましたら幸いです！
    引き続きよろしくお願いいたします！

    0