CSS3和js炫酷点击按钮3D翻转动画特效
简要教程
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翻转动画特效的更多相关文章
- 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!
关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦ 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用
- 一款非常炫酷的jQuery动态随机背景滚动特效
一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...
- 使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 近期工作有涉及到数字大屏的需求,于是利用业余时间,结合 Three.js ...
- 7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
- 使用three.js实现炫酷的酸性风格3D页面
背景 近期学习了 WebGL 和 Three.js 的一些基础知识,于是想结合最近流行的酸性设计风格,装饰一下个人主页,同时总结一些学到的知识.本文内容主要介绍,通过使用 React + three. ...
- 使用JS代码实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- js 实现页面点击按钮复制内容
前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...
- SVG 和 CSS3 实现一个超酷爱心 Like 按钮
在现代网页中,我们经常可以在一些文章.视频和图片页面上找到"Like"按钮,并且通过点击该按钮来表示自己对该内容的喜欢或者不喜欢.大部分"Like"按钮是纯文本 ...
- html5+CSS3实现的炫酷超链接特效
今天为大家介绍一个非常炫酷的超链接特效.在你做一些前端的网页时可以在里面去用上这些前卫时尚的效果. 这些超链接特性,大都是借助伪元素.svg.HTML5动画来实现的.效果都很漂亮,不信看下面. 用你的 ...
随机推荐
- Android WiFi开发
概述 介绍Android WiFi的扫描.连接.信息.以及WiFi热点等等的实现,并用代码实现. 详细 代码下载:http://www.demodashi.com/demo/10660.html 一. ...
- PHP一些优先级的问题
直接看代码 <?php echo '1'.print(2)+3,"\n"; 不错,就是这么简单,但是很少有人能正确回答 我们执行一下 [root@localhost test ...
- www.pythonchanlleges.com
0. 2**38 1. 字符串映射 s = """ g fmnc wms bgblr rpylqjyrc gr zw fylb. rfyrq ufyr amknsrcpq ...
- 使用Visual Studio code
快捷键 ctrl+b 打开或关闭侧边栏 ctrl+\ 打开多个editor ctrl+e 快速的通过名字打开一个文件 右键选择 Reveal in Explorer 打开文件夹 ctrl+tab 快速 ...
- 如何不让DataGridView自动生成列
如果不想让DataGridView自动生成与数据源对应的列, 只需要把属性AutoGenerateColumns设为false即可. 需要注意: 在界面设计的属性窗口中是看不到AutoGenerate ...
- AP_标准采购单付基本操作(流程)
2014-06-04 Created By BaoXinjian
- 匿名管道和pipe函数
一.进程间通信 每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进程之间要交换数据必须通过内核,在内核中开辟一块缓冲区,进程1把数据从用户空间拷到内核缓冲区,进程2 ...
- POSIX 共享内存和 系列函数
在前面介绍了system v 共享内存的相关知识,现在来稍微看看posix 共享内存 和系列函数. 共享内存简单来说就是一块真正的物理内存区域,可以使用一些函数将这块区域映射到进程的地址空间进行读写, ...
- Dev BarManager使用方法
作者:jiankunking 出处:http://blog.csdn.net/jiankunking 近期使用BarManager时候.发现一个问题就是在一開始把BarManager控件拖到窗口上的时 ...
- mysql-5.7 调整mysql的复制方式由master_log_file+master_log_pos 到gtid 详解
一.祖传的master_log_file + master_log_pos的复制方式面临的问题: 在很久以前 那个时候我还没有出道,mysql就已经就有复制这个功能了.如果要告诉slave库从mast ...