<!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. Python学习 Day 12 调试 断言 logging pdb pdb.set_trace

    调试 第一种方法简单直接粗暴有效,就是用print把可能有问题的变量打印出来看看: >>> def foo(s): n= int(s) print '>>> n = ...

  2. Node.js——express

    res.send(),比原生的 res.end() 强大,原生只支持字符串和Buffer对象,而且需要自己加响应报文头,send支持字符串.Buffer.Json对象.数组,而且自动加响应报文头 ap ...

  3. myslq 5.7 root 默认密码

    sudo sumysqld_safe --skip-grant-tables --skip-networking & UPDATE mysql.user SET password=PASSWO ...

  4. Ubuntu14.04环境下java web运行环境搭建

    1.jdk安装 将下载好的安装包上传至/home目录解压 tar -zxvf jdk-8u71-linux-x64.tar.gz 执行 vim /etc/profile 在末尾添加java环境变量(J ...

  5. 纯CSS3来自定义单选框radio与复选框checkbox

    单选框(radio)自定义样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...

  6. CAD参数绘制圆（com接口）

    CAD绘制图像的过程中,画圆的情况是非常常见的,用户可以设置圆的圆心位置及半径属性. 主要用到函数说明: _DMxDrawX::DrawCircle 绘制一个圆.详细说明如下: 参数 说明 DOUBL ...

  7. ajax 分页点击数据缓存

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 用js 转化大小写

    function capitalize(string){ var words =string.split(" "); for(var i=0;i<words.length;i ...

  9. 笔试算法题（36）：寻找一棵二叉树中最远节点的距离 & 根据二叉树的前序和后序遍历重建二叉树

    出题:求二叉树中距离最远的两个节点之间的距离,此处的距离定义为节点之间相隔的边数: 分析: 最远距离maxDis可能并不经过树的root节点,而树中的每一个节点都可能成为最远距离经过的子树的根节点:所 ...

  10. Python 函数递归-三元表达式-列表生成式-字典生成式-匿名函数-内置函数

    上节课复习: 1. 无参装饰器 def 装饰器名字(func): def wrapper(*args,**kwargs): res = func(*args,**kwargs) return res ...