<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title></title>

    <style type="text/css">

        @-webkit-keyframes flipInX {

            0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 }

            40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg) }

            70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg) }

            100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1 }

        }

        @keyframes flipInX {

            0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 }

            40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg) }

            70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg) }

            100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1 }

        }

        .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX }

        .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both }

        .ft {

            height: 78px;

            padding-top: 79px;

            font-weight: 400;

            font-size: 40px;

            text-align: center;

        }

    </style>

</head>

<body>

<div class="ft">

    我是一个好人

</div>

<a class="btn" href="javascript:;">按钮</a>

<script src="jquery-1.10.2.js"></script>

<script type="text/javascript">

    $(".btn").click(function () {

        $(".ft").addClass("animated flipInX");

        setTimeout(function(){

            $(".ft").removeClass("animated flipInX");

        }, 5000);

    });

</script>

</body>

</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. look look C#7

    vs2017也rc好几个版本了,本想跟进看看c#7加入了什么内容,去搜索c#7,确实找到了不少文章,无奈很多特性ide根本不让编译啊...所以今天主要列出已经确定了的c#7特性(一般来说rc后也不会加 ...

  2. 微信小程序开发之http到https的转化

    小程序从公布到现在已经过去好几个月了,本来从小程序发布出来就准备抱着微信的大腿进行一波小程序开发的,但是由于公司项目小程序暂时不支持,也就只能一直搁浅.过年过来偶然和朋友谈起小程序,觉的工作再忙也得找 ...

  3. ASP.NET应用程序的文件类型及文件夹列表

    文件类型: 1. *.aspx文件:这类文件是ASP.NET Web页面,它包括用户接口和隐藏代码. 2. *.ascx文件:这类文件是用户控件.用户控件同Web页面非常相似,但用户不能直接访问用户控 ...

  4. mycat

    mycat系列: mycat系列-概述 Cobar的十个秘密之一 Cobar的十个秘密之二 Cobar的十个秘密之三 Cobar的十个秘密之四 Cobar的十个秘密之五 Cobar的十个秘密之六 Co ...

  5. 国内不能使用Google解决方案（不断更新与递增中...）

    1.修改hosts方式可以根据对hosts的配置,解决Google搜索.Gmail.谷歌学术.维基百科.GitHub.Twitter.Facebook.Flickr.imgur.Google Serv ...

  6. JavaScript 基本类型值-Undefined、Null、Boolean

    ▓▓▓▓▓▓ 大致介绍 ECMAScript中有5中简单的数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number.String. ▓▓▓▓▓▓ Undefined ...

  7. unity脚本的运行顺序以及单例的实现

    unity引擎把所有脚本先行编译后,在运行的时候一批,一批的函数进行执行. unity脚本自带函数执行顺序如下:将下面脚本挂在任意物体运行即可得到 Awake ->OnEable-> St ...

  8. 规范 : jobbox 中英文

    中英文是为了candidate 可以看到不同的post job 语言. e.g. 如果是contact person 的“designation” ,这个不会显示在post job 里,目的只是给em ...

  9. 改变 Panel 跟 groupbox边框样式

    更改panel和groupbox的边框颜色因为在控件的属性中没有设置边框颜色的属性只有一个设置边框样式,遂在网络中搜寻出一下方法: panel的边框颜色在paint中重新对颜色进行定义 private ...

  10. C#集合的应用以及和数组比较，它的好处有哪些

    我们用的比较多的非泛型集合类主要有 ArrayList类 和 HashTable类.我们经常用HashTable 来存储将要写入到数据库或者返回的信息,在这之间要不断的进行类型的转化,增加了系统装箱和 ...