<!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】第一个爬虫

    import urllib.request import re class DownPic: def __init__(self,url,re_str): self.url = url self.re ...

  2. 掌握Spark机器学习库-09.3-kmeans算法实现分类

     数据集 iris.data 数据集概览 代码 package org.apache.spark.examples.hust.hml.examplesforml import org.apache.s ...

  3. R Programming week1-Reading Data

    Reading Data There are a few principal functions reading data into R. read.table, read.csv, for read ...

  4. getDate() 各种时间格式

    Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AMSelect CONVERT(varchar(100), GETDATE() ...

  5. Farseer.net轻量级开源框架 中级篇：UrlRewriter 地址重写

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: Cookies.Session.Request 下一篇:Farseer.net轻量 ...

  6. 洛谷 P1886 滑动窗口 (数据与其他网站不同。。)

    题目描述 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The array i ...

  7. （转）淘淘商城系列——使用maven构建工程

    http://blog.csdn.net/yerenyuan_pku/article/details/72669269 开发工具和环境 这里,我统一规范一下淘淘商城的开发工具和环境,如下: Eclip ...

  8. uiviewcontroller顶级布局控制

    @available(iOS 7.0, *) open var edgesForExtendedLayout: UIRectEdge // Defaults to UIRectEdgeAll @ava ...

  9. linux 后台进程

    1.进程放入后台 ctrl+z 进程放入后台 暂停执行 2.进程放入后台执行 bg % n 或者 bg n 进程放入后台执行 3.进程取出前台执行 fg % n 或者 fg n 进程取出前台执行 4. ...

  10. mac 下安装python pil

    mac:sudo brew install freetype sudo pip install pillow ubuntu: sudo apt-get install libfreetype6-dev ...