Q&A
想像しているエフェクト
こちらです。
上記のサイトのようなHoverエフェクトはどのようにして実装すれば良いでしょうか？
css
1a { 2 text-decoration: none; 3 margin: 1em 0; 4 transition: 1.0s; 5} 6 7a:hover { 8 bottom: 1em; 9 position: relative; 10 box-shadow: 0 0 1em 10px rgba(0,0,0,.08); 11}
分からないこと
a:hover{ bottom: 1em; }のスピードをコントロールする方法が分からない
分かっていること
transition: 秒数;でスピードをコントロールすることが出来ることは理解していますが、bottomは適用されません。どうすれば良いでしょうか？
可能であれば、Pure Javascript or CSS で実装したいです。
回答1件
0
ベストアンサー
CSS
1a { 2 bottom: 0; 3 position: relative; /* こっちにつける */ 4 text-decoration: none; 5 margin: 1em 0; 6 transition: 1.0s; 7} 8 9a:hover { 10 bottom: 1em; 11 box-shadow: 0 0 1em 10px rgba(0,0,0,.08); 12} 13```**動くサンプル：**[https://jsfiddle.net/jebqLksg/](https://jsfiddle.net/jebqLksg/)
投稿2017/04/27 04:20
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。