<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>css3 模拟标牌震荡效果</title>

  <style type="text/css" media="screen">

    .title{

      width: 1082px;

      height: 69px;

      background: url(img/title-biaobai.png) center 90px no-repeat;

      margin: 0 auto;

      background-position: 0;

    }

    .flipInX {

      -webkit-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;

    }

    /*一种震荡效果*/

    @keyframes flipInX {

      /*先翻转90度与电脑屏幕垂直*/

      0% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

        transform: perspective(0px) rotate3d(1, 0, 0, 90deg);

        -webkit-animation-timing-function: ease-in;

        animation-timing-function: ease-in;

        opacity: 0;

      }

      /*自然过渡落下到，负一边20度*/

      40% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

        -webkit-animation-timing-function: ease-in;

        animation-timing-function: ease-in;

      }

      /*自然过渡落下到，10度*/

      60% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

        opacity: 1;

      }

      /*自然过渡落下到，负一边5度*/

      80% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

      }

      /*然后恢复正常与屏幕平行*/

      100% {

        -webkit-transform: perspective(400px);

        transform: perspective(400px);

      }

    }

  </style>

</head>

<body>

  <div style="height: 500px;">

  </div>

  <div class="title">

  </div>

  <div style="height: 500px;">

  </div>

  <div class="title">

  </div>

  <div style="height: 500px;">

  </div>

  <div class="title">

  </div>

  <div style="height: 500px;">

  </div>

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

  <script>

    $(document).ready(function(){

        //如果已经有元素满足动画条件，就在加载完毕，调用一次

        initTitle();

        //监听窗口滚动事件

        $(window).scroll(initTitle);

    });

    function initTitle(){

      //获取到滚动条距离浏览器顶部的距离

      var top = $(document).scrollTop();

      //获取到浏览器窗口当前的高度

      var height = $(window).height();

      //获取到当前class中包含title 的元素，这里获取到的是多个元素

      var items = $(".title")

      items.each(function(){

        //先把this赋值给一个变量，

        var m = $(this);

        //获取到每个item距离顶端的距离

        var itemTop = m.offset().top;

        //这里加100是为了有更好的用户体验

        //在控制台中打印

        console.log(top+"---"+itemTop);

        if(top > itemTop-height+100){

          m.addClass('flipInX animated');

        } else {

          return false;//跳过不用走的

        }

      });

    }

  </script>

</body>

</html>

效果如下：当第一次出现在视野中时，震动一次

css3 模拟标牌震荡效果

 
 
 
 
 
 
 

css3 模拟标牌震荡效果的更多相关文章

  1. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  2. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  3. css3模拟jq点击事件

    还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...

  4. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  5. CSS3模拟IOS滑动开关

    前言 H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释 效果 代码 <!DOCTYPE html> <html lang=" ...

  6. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  7. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  8. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  9. HTML5 模拟现实物理效果，感受 Web 技术魅力

    Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...

随机推荐

  1. 在action中将字符串、对象、list集合保存到值栈中，在jsp页面中获取的方法

    转自:csdn 封装对象User,属性有id,username,email等1.1:在action中将字符串保存到值栈中   1.1.1 获取值栈对象         ValueStack stack ...

  2. （转载）Sql注入的分类：数字型+字符型

    Sql注入: 就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.通过构造恶意的输入,使数据库执行恶意命令,造成数据泄露或者修改内容等,以 ...

  3. centOS linux 下PHP编译安装详解

    一.下载PHP源码包 wget http://php.net/distributions/php-5.6.3.tar.gz   二.添加依赖应用 yum install -y gcc gcc-c++ ...

  4. python学习第三次

    while循环 表示当条件成立的时候就循环适用于不知道具体循环次数,但是确定在某个条件成立的情况下就循环while语法:while 条件表达式:语句块#另一种表达方式while 条件表达式:语句块1e ...

  5. redisd的非持久化配置

    如何关闭redis持久化?我的需求是只把redis当作缓存来用,所以持久化到硬盘对我的需求来说没有意义. 修改redis配置文件,redis.conf 第115行左右. 1.注释掉原来的持久化规则 # ...

  6. D1. Toy Train (Simplified)

    D1. Toy Train (Simplified) time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  7. WebDAV协议

    WebDAV是一项基于 Http1.1 协议的通信协议.它扩展了HTTP 1.1,在Get.Post.Put.Delete 等HTTP标准方法外添加了新方法,使应用程序可对Web Server直接读写 ...

  8. 06XML JavaScript

    1. XML JavaScript XMLHttpRequest 对象 XML DOM (XML Document Object Model) 定义了访问和操作 XML 文档的标准方法.

  9. Myeclipse快速排版的快捷键

    Myeclipse快速排版的快捷键 1.全选 ctrl+a 2.排版 ctrl+i

  10. 【2018 1月集训 Day1】二分的代价

    题意: 现在有一个长度为 n的升序数组 arr 和一个数 x,你需要在 arr 中插入 x. 你可以询问 x 跟 arri 的大小关系,保证所有 arri 和 x 互不相同.这次询问的代价为 cost ...