[ 解決済 ] ボタンにアニメーションをつける
[ 解決済 ] ボタンにアニメーションをつける
- このトピックには4件の返信、3人の参加者があり、最後に
により2日、 8時間前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.7■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning Pro■ テーマのバージョン
15.28.0■ スキンの種類
Origin II■ 期待する動作
添付画像のボタンを実装したいです。要件
ボタンとして実装し、クリック時に”View More”をふわっと上に。
矢印をふわっと右に動くようにしたい。またそもそも、ボタンブロックを使用し、添付画像のようにView Moreと矢印の位置をずらしたり、
画像のような矢印を実装することは可能でしょうか？分かる方おりましたらご回答何卒よろしくお願いいたします。
■ 自分で試した事
ボタンブロックでの実装を試してみた。■ 症状が発生するブラウザ
Chrome■ 実際の症状
View Moreの文字は入るが、デザインにある矢印の実装ができない。
View Moreと矢印をずらすことができない。
アニメーション実装ができない。お世話になっております。
こちらのパターンがご希望のイメージに近いのではないかと思いましたので、ご案内申し上げます。
なお、矢印部分は CSS の
beforeおよびafter要素で実装されております。
ご確認のほど、よろしくお願いいたします。うなこさんがお示しくださっているもののうち「Hover時に矢印が動く」の１つ目を少し触ってみました。
こんな感じでしょうか。
(以下のコードを投稿画面に貼り付けてみてください)<!-- wp:paragraph {"vkbCustomCss":"/* Hover時に矢印が動く */\nselector a {\n position: relative;\n display: inline-block;\n padding-right: 50px;\n text-decoration: none;\n color: currentColor;\n transition: transform 0.2s ease, color 0.2s ease; /* ふわっと移動のアニメーション */\n}\n\nselector a::before {\n width: 100px;\n bottom: 2%;\n right: 3px !important;\n border-bottom: solid 2px currentColor;\n}\n\nselector a::after {\n width: 30px;\n background: currentColor;\n bottom: calc(50% - 3px);\n transform: rotate(45deg);\n}\n\n/* 共通 */\nselector a::before,\nselector a::after {\n content: '';\n position: absolute;\n display: block;\n height: 1.5px;\n right: 0;\n transition: all 0.2s linear;\n}\n\n/* hover時：矢印が右に動く */\nselector a:hover::before {\n right: -10px !important;\n}\nselector a:hover::after {\n right: -14px !important;\n}\n\n/* hover時：テキストがふわっと上に移動 */\nselector a:hover {\n transform: translateY(-3px); /* 3px上に移動 */\n}","className":"vk_custom_css","style":{"typography":{"fontSize":"1.25rem"}},"textColor":"black"} --> <p class="vk_custom_css has-black-color has-text-color" style="font-size:1.25rem"><a href="#">View More</a></p> <!-- /wp:paragraph -->※ 私の環境で作業しました故、お使いの環境や既に施されているカスタマイズ等によって修正が必要になる可能性がございます。
すみません。動画を添付すると、ダウンロード視聴が必要になるんですね。
ダウンロードしなくてもご確認いただけるよう、gif に変換して添付します。
- このトピックに返信するにはログインが必要です。
