极客编程挑战#017 :按钮确认删除效果概念设计

更新时间:2015-05-06 03:55:13点击次数:2600次

给定HTML如下:

  1. 1<a class="button" role="button">

  2. 2 <span>删除</span>

  3. 3 <div class="icon">

  4. 4 <i class="fa fa-times"></i>

  5. 5 <i class="fa fa-check"></i>

  6. 6 </div>

  7. 7</a>

  8. 9<!-- 推荐开源CDN来选取需引用的外部JS //-->

  9. 10<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

基础CSS如下:

  1. 1@import url('http://cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css');

  2. 3* {

  3. 4  margin: 0;

  4. 5  padding: 0;

  5. 6  box-sizing: inherit;

  6. 7}

  7. 9*:focus { 

  8. 10  outline: none;

  9. 11}

  10. 12 

  11. 13html {

  12. 14  box-sizing: border-box;

  13. 15}

  14. 16 

  15. 17body {

  16. 18  background-color: #ecf0f1;

  17. 19  font-family: 'microsoft yahei',Arial,sans-serif;

  18. 20}

  19. 请使用CSS和jQuery生成如下的删除按钮及其确认效果:

  1. 初始按钮为一个关闭图标+文字

  2. 鼠标悬浮按钮,横向动画切换成一个单独的大号关闭图标 (使用font-awesome

  3. 点击按钮,按钮切换为绿色背景的对勾图标,确认已删除

  4. 点击按钮3秒后,自动恢复为初始按钮状态

参考以下完整UI设计效果:


本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息