简要教程

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翻转动画特效的更多相关文章

  1. 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!

    关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦  7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用

  2. 一款非常炫酷的jQuery动态随机背景滚动特效

    一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...

  3. 使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 近期工作有涉及到数字大屏的需求,于是利用业余时间,结合 Three.js ...

  4. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  5. 使用three.js实现炫酷的酸性风格3D页面

    背景 近期学习了 WebGL 和 Three.js 的一些基础知识,于是想结合最近流行的酸性设计风格,装饰一下个人主页,同时总结一些学到的知识.本文内容主要介绍,通过使用 React + three. ...

  6. 使用JS代码实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

  7. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

  8. SVG 和 CSS3 实现一个超酷爱心 Like 按钮

    在现代网页中,我们经常可以在一些文章.视频和图片页面上找到"Like"按钮,并且通过点击该按钮来表示自己对该内容的喜欢或者不喜欢.大部分"Like"按钮是纯文本 ...

  9. html5+CSS3实现的炫酷超链接特效

    今天为大家介绍一个非常炫酷的超链接特效.在你做一些前端的网页时可以在里面去用上这些前卫时尚的效果. 这些超链接特性,大都是借助伪元素.svg.HTML5动画来实现的.效果都很漂亮,不信看下面. 用你的 ...

随机推荐

  1. 由select/epoll返回的非阻塞connect还会是EINPROGRESS状态吗?

    一般情况下,我们像下面代码中所示的这样使用非阻塞connect: #include <stdio.h> #include <stdlib.h> #include <str ...

  2. 如何发布开源自己的框架或类库到CocoaPods - 图文讲解

    当自己的库已经上传GitHub后,那么如何快速简单的开源自己的库呢? 这里就是介绍如何将自己的类库上传到pods管理库,以便开源所有人都能方便使用. 准备前提: - 项目已上传到GitHub (注意, ...

  3. macOS Sierra Git Gui Crash 解决方法

    本篇文章由:http://xinpure.com/macos-sierra-git-gui-crash-solution/ 问题描述 自从升级到 macOS Sierra 10.12 之后,git g ...

  4. oc 类的使用

    //定议一个Hello类,用@interface @end包着,并且继承NSObject @interface Hello : NSObject{ int num; }//包在大括号里面是私有的属性, ...

  5. DBA_实践指南系列9_Oracle Erp R12应用补丁AutoPatch/AutoControl/AutoConfig(案例)

    2013-12-09 Created By BaoXinjian

  6. Unix环境高级编程(十三)守护进程

    守护进程也称为精灵进程是一种生存期较长的一种进程.它们独立于控制终端并且周期性的执行某种任务或等待处理某些发生的事件.他们常常在系统引导装入时启动,在系统关闭时终止.unix系统有很多守护进程,大多数 ...

  7. 《TCP/IP具体解释卷2:实现》笔记--选路请求和选路消息

    内核的各种协议并不直接使用前面提供的函数来訪问选路树,而是调用几个函数:rtalloc和rtallocl是完毕路由表查询的两个 函数:rtrequest函数用于加入和删除路由表项:另外大多数接口在接口 ...

  8. kubernetes 二

    部署harbor Habor是由VMWare中国团队开源的容器镜像仓库.事实上,Habor是在Docker Registry上进行了相应的企业级扩展,从而获 得了更加广泛的应用,这些新的企业级特性包括 ...

  9. cocos2dx 3.x draw debug

    有时候需要用ccDrawXXX绘制debug线框来调试图形程序. 在cocos2dx 2.x中,由于是立即模式,所以如果在draw函数中用ccDrawXXX画线框,要用节点的局部坐标. 在cocos2 ...

  10. 关于TcpClient,Socket连接超时的几种处理方法

    用TcpClient做通信的时候,经常发现网络连接不通的时候,代码就卡死在那里,TcpClient竟然没有超时的设定 泪奔啊 看来微软不是把所有工具准备得妥妥当当的啊 没办法 现在用线程来包装一下这个 ...