キラーン
タイプマイクロインタラクション系 ボタン・リンク系
類似の音キラーンピカーン
目次
オノマトペ
hoverしてね
ソースコード
あくまでも一例なので参考程度に使ってください。
キラーンHTML
1 | <div class="sample"> |
2 | <a href="#">キラーンボタン</a> |
3 | </div> |
ぽよぽよCSS
1 | /* 今回はhoverバージョンを作成 */ |
2 | .sample { |
3 | margin: 0 auto 30px; |
4 | position: relative; |
5 | width:300px; |
6 | overflow: hidden; |
7 | } |
8 | .sample::before { |
9 | content: ''; |
10 | width:40px; |
11 | height: 100px; |
12 | transform: rotate(30deg); |
13 | background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 47%,rgba(255,255,255,0) 96%,rgba(255,255,255,0) 100%); |
14 | position: absolute; |
15 | left: -20%; |
16 | top: -20px; |
17 | transition: .5s all; |
18 | } |
19 | .sample:hover::before { |
20 | content: ''; |
21 | position: absolute; |
22 | left: 130%; |
23 | top: -20px; |
24 | opacity: 0; |
25 | } |
26 | .sample a { |
27 | padding: 1em; |
28 | border-radius: 8px; |
29 | display: block; |
30 | width: 200px; |
31 | text-align: center; |
32 | background-color: #203394; |
33 | color: #FFF; |
34 | font-size: 115%; |
35 | } |
使い方
- このボタン、オンマウスの時「キラーン」と光らせたいんだけど！
- 何秒かおきに「キラーン」と光らせることはできますか？