くるりんぱ

タイプマイクロインタラクション系 類似の音

目次

オノマトペ

:hoverすべし

入力フォームに応用

ソースコード

あくまでも一例なので参考程度に使ってください。

ポケストップHTML

ソースを表示
印刷SyntaxHighlighterについて
1<div class="sample">
2<div class="omote"><img src="/wp-content/themes/onmtp/imgs/neko1.png"></div>
3<div class="ura"><img src="/wp-content/themes/onmtp/imgs/neko2.png"></div>
4</div>

ポケストップCSS

ソースを表示
印刷SyntaxHighlighterについて
1.sample {
2    position: relative;
3    transform: perspective(500);
4    transform-style: preserve-3d;
5}
6.sample .omote,
7.sample .ura {
8    margin: 0 auto;
9    padding: 20px;
10    border-radius: 50%;
11    width: 100px;
12    height: 100px;
13    position: absolute;
14    left: 0;
15    top: 0;
16    transform-origin: 50% 50%;
17    transition: .6s all ease-in-out;
18    backface-visibility: hidden;
19}
20.sample .omote {
21    background-color: #6C85FC;
22    transform: rotateX(0);
23}
24.sample .ura {
25    background-color:#F86F71;
26    transform: rotateX(-180deg);
27}
28.sample:hover .omote {
29background-color: #6C85FC;
30    transform: rotateX(-180deg);
31}
32.sample:hover .ura {
33    background-color:#F86F71;
34    transform: rotateY(0);
35}
36.sample .omote img,
37.sample .ura img {
38    width: 100px;
39    height: 100px;
40}

使い方

  • このバナー、オンマウスしたら「ポケストップ」的な動きにできますか？
  • ここ入力フォーム、入力完了して問題なかったら「必須」マークから「OK」マークに「ポケストップ」させて！