<!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. 计算机 计算机语言 常见的DOS命令

    你好 我是大福 你现在看的是大福笔记 我jie的女儿 8年级 在QQ上问我寒假作业 0度的水和0度的冰哪个更冷 什么? 0度水 0度冰这温度不是一样的么? 不可能 肯定没这么简单 她问的意思是不是手放 ...

  2. 微信jsSDK公众号开发时网页提示 invalid signature错误的解决方法

    微信公众号开发jsSDK,链接地址不能加?参数,可以通过#传递参数. 不然.页面wx.ready()时就会报错,用 wx.error(function (res) { alert("接口验证 ...

  3. SmartRoute之远程接口调用和负载

    基于接口的调用远比基于基础消息交互来得更简单和便于维护,特别在业务展现上,接口作为业务表现更适合其便利性.为了让SmartRoute更适合业务应用集成,在新的一年开始SmartRoute集成了远程接口 ...

  4. python爬虫利器Selenium使用详解

    简介: 用pyhon爬取动态页面时普通的urllib2无法实现,例如下面的京东首页,随着滚动条的下拉会加载新的内容,而urllib2就无法抓取这些内容,此时就需要今天的主角selenium. Sele ...

  5. input输入自动大写

    方法1:使用JS <input name="text" type="text" onkeyup="this.value=this.value.t ...

  6. keepalived 安装配置

    keepalived介绍 1. keepalived 是lvs 的扩展项目,因此它们之间具备良好的兼容性. 2. 通过对服务器池对象的健康检查,实现对失效机器/服务的故障隔离. 3. 负载均衡器之间的 ...

  7. 每天一个linux命令(26)--用SecureCRT来上传和下载文件

    用SSH管理Linux 服务器时经常需要远程与本地之间交互文件,而直接使用 SecureCRT 自带的上传下载功能无疑是最方便的,SecureCRT下的文件传输协议有ASCII.Xmodem.Zmod ...

  8. UVALive 7045 Last Defence

    ProblemK. Last Defence Description Given two integersA and B. Sequence S is defined as follow: • S0 ...

  9. ERP实施顾问工作中应努力做到哪些？

    1.树立并分享信誉 准确的为自己定位,并积极树立自己的信誉.从这样两个角度去考虑问题,一是从高层管理者的角度去思考行业竞争和公司运作的问题,一是从专业.细致的角度去考虑单据.报表.界面等数据处理的问题 ...

  10. 依赖ConstraintLayout报错，Could not find *****，Failed to resolve:*****

    ConstraintLayout 约束布局,AndroidStudio2.2中新增功能之一,可以先去看看这篇文章 Android新特性介绍,ConstraintLayout完全解析,2.3版本的And ...