首页 > Web开发 > 详细

CSS3和js炫酷点击按钮3D翻转动画特效

时间:2015-03-13 10:37:39      阅读:384      评论:0      收藏:0      [点我收藏+]

简要教程

flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效。该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的。

技术分享

在线预览   源码下载

使用方法

使用该按钮过渡动画特效需要引入它提供的按钮样式表style.css和用于触发按钮点击事件的js文件script.js。

HTML结构

该点击按钮过渡动画特效使用一个嵌套div的HTML结构:

<div class="btn">
  <div class="btn-back">
    <p>Are you sure you want to do that?</p>
    <button class="yes">Yes</button>
    <button class="no">No</button>
  </div>
  <div class="btn-front">Delete</div>
</div>

完成上面的步骤后,该按钮点击特效即可使用。下载包中提供了SASS文件,你可以自行修改按钮和确认面板的样式。

via:http://www.w2bc.com/Article/27249

CSS3和js炫酷点击按钮3D翻转动画特效

原文:http://www.cnblogs.com/liaohuolin/p/4334366.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!