jQuery CSS3实现今日签到表情选择动画特效代码

jQuery CSS3实现今日签到表情选择动画特效代码

一款jQuery基于css3属性制作“你今天心情如何”3个表情状态选择动画特效。

使用方法
在页面引入style.css文件

1
<link rel="stylesheet" href="css/style.css">

JS代码
需要用到的js文件jquery.min.js、index.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
<div id="app-cover">
<h1>你今天心情如何?</h1>
<div id="app">
<div class="mood" id="mood-great">
  <div class="face">
    <div class="eyes-cover">
      <div class="eye"></div>
      <div class="eye"></div>
    </div>
    <div class="mouth"></div>
  </div>
  <div class="mood-name"><span>非常好</span></div>
</div>
<div class="mood" id="mood-okay">
  <div class="face">
    <div class="eyes-cover">
      <div class="eye"></div>
      <div class="eye"></div>
    </div>
    <div class="mouth"></div>
  </div>
  <div class="mood-name"><span>一般</span></div>
</div>
<div class="mood" id="mood-bad">
  <div class="face">
    <div class="eyes-cover">
      <div class="eye"></div>
      <div class="eye"></div>
    </div>
    <div class="mouth"></div>
  </div>
  <div class="mood-name"><span>很坏</span></div>
</div>
</div>
</div>
<div class="action-btn" id="play-pause">暂停/播放自动</div>
<div class="action-btn" id="clear">删除自动</div>

文件信息:

    3

    发表评论