1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title></title>
  6.     <style type="text/css">
  7.         @-webkit-keyframes flipInX {
  8.             0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 }
  9.             40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg) }
  10.             70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg) }
  11.             100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1 }
  12.         }
  13.         @keyframes flipInX {
  14.             0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 }
  15.             40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg) }
  16.             70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg) }
  17.             100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1 }
  18.         }
  19.         .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX }
  20.         .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
  21.         .ft {
  22.             height: 78px;
  23.             padding-top: 79px;
  24.             font-weight: 400;
  25.             font-size: 40px;
  26.             text-align: center;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.  
  32. <div class="ft">
  33.     我是一个好人
  34. </div>
  35. <a class="btn" href="javascript:;">按钮</a>
  36.  
  37. <script src="jquery-1.10.2.js"></script>
  38. <script type="text/javascript">
  39.     $(".btn").click(function () {
  40.         $(".ft").addClass("animated flipInX");
  41.         setTimeout(function(){
  42.             $(".ft").removeClass("animated flipInX");
  43.         }, 5000);
  44.     });
  45. </script>
  46. </body>
  47. </html>

css3特效的更多相关文章

  1. CSS3 特效分解一

    先声明下,下面的特效不是我发明的,对CSS3的创造力还不够,只是看了别人demo的源码,一点一点分析出来的.整理出的笔记,分享给大家.因为源码是好,但是一头扎进去半天出不来. 首先看个登陆框,如下,相 ...

  2. 15款效果很酷的最新jQuery/CSS3特效

    很久没来博客园发表文章了,今天就分享15款效果很酷的最新jQuery/CSS3特效,废话不说,一起来看看吧. 1.3D图片上下翻牌切换 一款基于jQuery+CSS3实现的3D图片上下翻牌切换效果,支 ...

  3. CSS3特效之转化（transform）和过渡（transition）

    CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...

  4. 圆周运动的css3特效案例

    <!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8&qu ...

  5. 9 款赏心悦目的 HTML5/CSS3 特效

    1.HTML5 WebGL实验,超酷的HTML5 Canvas波浪墙 这是一款HTML5 Canvas实验项目,也是波浪特效,只是这不是真正的水波,而是利用柱体高度的变化实现的波浪墙效果. 在线演示 ...

  6. 14种网页jQuery和css3特效插件代码演示

    1.网页table增删样式代码 演示和下载地址 2.jQuery左右滑动幻灯片插件 演示和下载地址 3.jQuery文字轮播焦点图 演示和下载地址 4.网页文字焦点图切换 演示和下载地址 5.jQue ...

  7. 仿QQ浏览器mac版官网主页 html+css3特效

    这是一款超酷的CSS3动态背景动画特效,CSS3仿QQ浏览器官网彗星动画背景特效. 在线演示本地下载

  8. css3特效插件wow.js

    在使用css3写特效的时候,会遇到比较麻烦的就是css3代码需要大量的调试,但是现在有了wow.js,让写特效变得简单了很多. wow.js官网 https://www.delac.io/wow/in ...

  9. HTML5+CSS3特效设计集锦

    20款CSS3鼠标经过文字背景动画特效 站长之家 -- HTML5特效索引 爱果果h5酷站欣赏  30个酷毙的交互式网站(HTML5+CSS3) 轻松搞定动画!17个有趣实用的CSS 3悬停效果教程 ...

  10. CSS3特效----制作3D旋转照片展示区

    任务一.制作多背景 提示:上层有一个径向渐变,渐变图像farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204, ...

随机推荐

  1. java中File类的常用所有方法及其应用

    创建:createNewFile()在指定位置创建一个空文件,成功就返回true,如果已存在就不创建,然后返回false.mkdir()  在指定位置创建一个单级文件夹.mkdirs()  在指定位置 ...

  2. .NET Core在WindowsServer服务器部署及发布

    VS使用WEB DEPLOY发布.NET Core程序   背景是这样的,公司有两台服务器,平时一台备用,另一台做为主生产机器.当有大量补丁或者安装什么东西需要重启的时候,交其中一台直接关掉IIS,然 ...

  3. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  4. 每天一个Linux命令（10）--cat命令

    --首先,恭喜你,这是第十个命令啦. --为啥第十个就要恭喜?没啥特别呀? --因为逢十进一啊! cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或 ...

  5. Springboot 整合 Dubbo/ZooKeeper 详解 SOA 案例

    摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢!   “看看星空,会觉得自己很渺小,可能我们在宇宙中从来就是一个偶然.所以,无论什么事情,仔细想一 ...

  6. Foundation Kit介绍

    Cocoa实际上是由许多个不同的框架组成的,其中最常用于桌面端(OS X)应用程序的是Foundation和Application Kit.它包含了所有的用户界面对象和高级类.如果打算开发ios平台上 ...

  7. dubbo源码分析（一）

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  8. Hibernate框架单向多对多关联映射关系

    建立单向多对多关联关系    Project.java (项目表)                private Integer proid;                private Strin ...

  9. Array对象方法属性总结

    属性主要有三个:constructor;length;prototype; constructor(英文意思:构造器):返回对创建此对象的数组函数的引用.例如:var arr=new Array(); ...

  10. Selenium Web 自动化 - 项目持续集成

    Selenium Web 自动化 - 项目持续集成 2017-02-13 目录 1环境准备  1.1 安装git  1.2 安装jenkins  1.3 安装jenkins插件  1.4 jekins ...