<!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. Linux(Ubuntu)下载安装破解Matlab2016

    跳过废话, 直接看教程 前言 笔者平常不是很喜欢用Matlab, 因为所需要的功能都能被Python替代, 而Matlab的肥和慢实在令人难以忍受. 在Linux系统下安装Matlab也比Window ...

  2. Swift2.0 函数学习笔记

    最近又有点忙,忙着找工作,忙着适应这个新环境.现在好了,上班两周周了,也适应过来了,又有时间安安静静的就行我们前面的学习了.今天这篇笔记,记录的就是函数的使用.下面这些代码基本上是理清楚了函数的额使用 ...

  3. java多线程安全问题 静态函数的修饰

    /* 如果同步函数被静态修饰后,使用的锁是什么呢? 通过验证,发现不在是this.因为静态方法中也不可以定义this. 静态进内存是,内存中没有本类对象,但是一定有该类对应的字节码文件对象. 类名.c ...

  4. 关系型数据库MySql-模糊搜索优化(like %abc%):全文搜索引擎技术选型

    1.阿里云OpenSearch 阿里云开放搜索OpenSearch是一款阿里巴巴自主研发的大规模分布式搜索引擎平台,该平台承载了淘宝.天猫.1688.神马搜索.口碑.菜鸟等搜索业务,通过OpenSea ...

  5. Oracle索引语句整理

    转载:http://www.cnblogs.com/djcsch2001/articles/1823459.html 索引,索引的建立.修改.删除 索引索引是关系数据库中用于存放每一条记录的一种对象, ...

  6. jQuery_第一章_JavaScript基础

    JavaScript基础 JavaScript不难,但是对于初学者来讲比较的怪异. 是一种客户端语言,在浏览器执行的.是一种脚本语言,直接就能解释执行的叫脚本代码.像dos命令还有SQL也是. 为什么 ...

  7. 卷积神经网络(CNN)模型结构

    在前面我们讲述了DNN的模型与前向反向传播算法.而在DNN大类中,卷积神经网络(Convolutional Neural Networks,以下简称CNN)是最为成功的DNN特例之一.CNN广泛的应用 ...

  8. Python求解数组重新组合求最小值（优酷）

    题目描述:题目:含有n个元素的整型数组,将这个n个元素重新组合,求出最小的数,如(321,3,32,) 最小数为321323 题目分析: 将数组中所有元素填充到个数相等,填充的数字为最后一位的数字,如 ...

  9. JavaScript定义函数的三种方式

    直接定义函数 function f1(x,y){ return x+y; } 使用Function构造函数 var f2=new Function("x","y" ...

  10. FaceNet---深度学习与人脸识别的二次结合

    今天我给大家带来一篇来自谷歌的文章,众所周知,谷歌是全世界最有情怀,最讲究技术的公司,比我们天朝的莆田广告商良心多了.还有就是前段时间的最强大脑,莆田广告商的那个小机器,也就忽悠忽悠行外人了,懂的人深 ...