给定HTML如下:
1<a class="button" role="button">
2 <span>删除</span>
3 <div class="icon">
4 <i class="fa fa-times"></i>
5 <i class="fa fa-check"></i>
6 </div>
7</a>
8
9<!-- 推荐开源CDN来选取需引用的外部JS //-->
10<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
基础CSS如下:
1@import url('http://cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css');
2
3* {
4 margin: 0;
5 padding: 0;
6 box-sizing: inherit;
7}
8
9*:focus {
10 outline: none;
11}
12
13html {
14 box-sizing: border-box;
15}
16
17body {
18 background-color: #ecf0f1;
19 font-family: 'microsoft yahei',Arial,sans-serif;
20}
请使用CSS和jQuery生成如下的删除按钮及其确认效果:
初始按钮为一个关闭图标+文字
鼠标悬浮按钮,横向动画切换成一个单独的大号关闭图标 (使用font-awesome)
点击按钮,按钮切换为绿色背景的对勾图标,确认已删除
点击按钮3秒后,自动恢复为初始按钮状态
参考以下完整UI设计效果:
