たまたまいろいろなサイトを見ていたらaタグで作ったボタンをプルンと動かす…という面白い動きをしたものを見かけたので、備忘録もかねて紹介したいと思います！
ちなみに当サイトでもWORKのページでも実装していたりします(^^)
プルンと動くというとどんなふうに動くの？
ちなみにaタグで作ったボタンがプルンと動くというのは、以下のような感じになります！
上のように表示させるには、以下のようにHTMLとCSSを設定することで可能になります！
1. プルンと動かしたいaタグを記述する
まず、プルンと動かしたいaタグを以下のようにHTMLソースに記述します。
2. CSSを設定する
まずaタグそのもののデザインは希望のものを設定しておきましょう。
その上で、下記のようにCSSを記述します。
2 | animation: prun 2.2s ease-in infinite; |
3 | -webkit-animation: prun 2.2s ease-in infinite; |
4 | -moz-animation: prun 2.2s ease-in infinite; |
5 | -o-animation: prun 2.2s ease-in infinite; |
6 | -ms-animation: prun 2.2s ease-in infinite; |
10 | 48%, 62% {transform: scale(1.0, 1.0)} |
11 | 50% {transform: scale(1.1, 0.9)} |
12 | 56% {transform: scale(0.9, 1.1) translate(0, -5px)} |
13 | 59% {transform: scale(1.0, 1.0) translate(0, -3px)} |
16 | @-webkit-keyframes prun{ |
17 | 48%, 62% {-webkit-transform: scale(1.0, 1.0)} |
18 | 50% {-webkit-transform: scale(1.1, 0.9)} |
19 | 56% {-webkit-transform: scale(0.9, 1.1) translate(0, -5px)} |
20 | 59% {-webkit-transform: scale(1.0, 1.0) translate(0, -3px)} |
上記コードの2～5行目がaタグをプルンと動かすために必要なCSSの設定その1になります。
続いて9～14行目の
@keyframes prun {
～
}
というものが、実際にaタグをプルンと動かすために必要なCSSになります。
ただ、これだとFirefox系のインターネットブラウザではうまくボタンがプルンと動かない場合があるので、16～21行目の
@-webkit-keyframes prun{
～
}
でFirefox系のブラウザでもボタンをプルンと動かせるようになります！
まとめ
以上の作業を行うことで、aタグで作ったボタンをプルンと動かすことが可能になります！
動きとしても目立ちますし、なんだかかわいいので何かの機会がありましたら使ってみてはいかがでしょうか(^-^)
