基于jQuery鼠标动画悬停按钮特效代码

基于jQuery鼠标动画悬停按钮特效代码

今天给大家带来一款基于jQuery实现的鼠标悬停动画按钮。这款按钮鼠标悬停会出现泡泡动画,当鼠标经过的时候以动画的形式变成圆形。

使用方法
在页面引入需要用到的JS文件

1
2
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="content">
<h1>泡泡悬停效果</h1>
<div class="button_container">
<div class="button_su">
<span class="su_button_circle">
</span>
<a href="#" class="button_su_inner">
<span class="button_text_container">
Simple button
</span>
</a>
</div>
<div class="button_su">
<span class="su_button_circle">
</span>
<a href="#" class="button_su_inner">
<span class="button_text_container">
Another button
</span>
</a>
</div>
<div class="button_su">
<span class="su_button_circle">
</span>
<a href="#" class="button_su_inner">
<span class="button_text_container">
A third button
</span>
</a>
</div>
<div class="button_su">
<span class="su_button_circle">
</span>
<a href="#" class="button_su_inner">
<span class="button_text_container">
A forth button
</span>
</a>
</div>
</div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论