<!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. Android习惯--Activity启动方法

    public void Text extends Activity{ public void static actionStart(Context context, int i, String str ...

  2. Android学习笔记（十一） Intent

    一.Intent对象的基本概念 -Intent是Android应用程序组件之一 -Intent对象在Android系统当中表示一种意图 -Intent当中最重要的内容是action与data 二.In ...

  3. iOS中的蓝牙

    iOS中的蓝牙 概述 iOS中提供了4个框架用于实现蓝牙连接 1.GameKit.framework(用法简单) 只能用于iOS设备之间的同个应用内连接,多用于游戏(eg.拳皇,棋牌类),从iOS7开 ...

  4. oracle 执行跟踪

    一.sql_trace的介绍 --打开trace文件设置,把sql trace设置为true,就会在udump目录中增加一个trc文件.alter session set sql_trace=true ...

  5. c# 导出DataSet到excel

    public static bool ExportToExcel_dataSet(string queryNo, string conditions) { bool _bl = false; try ...

  6. restful api的简单理解

    百度百科的描述:一种软件架构风格,设计风格而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制. RES ...

  7. python中统计计数的几种方法和Counter的介绍

    使用字典dict()alist=['a','b','a','c','b','b',1,3]count_dict = dict()for i in alist:count_dict[i]=count_d ...

  8. Beta测试团队

    ---恢复内容开始--- Beta版本测试 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/?page ...

  9. CREATE CAST - 定义一个用户定义的转换

    SYNOPSIS CREATE CAST (sourcetype AS targettype) WITH FUNCTION funcname (argtype) [ AS ASSIGNMENT | A ...

  10. bzoj3994: [SDOI2015]约数个数和（反演+结论？！）

    这题做的历程堪称惊心动魄 刚刚学了莫比乌斯反演的我高高兴兴的和cbx一起反演式子 期间有突破,有停滞,有否定 然后苟蒻的我背着cbx偷偷打开了题解 看到了 我...... 去你的有个性质啊(当然还是自 ...