<!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. javascript之input获取的时间减1秒&&t时间恢复

    将输入得到的时间减少1秒:20:00:00  ———  19:59:59    方法一:普通时间转换 endDateMap(date){ var h = new Date(date).getHours ...

  2. ESLint - 简介

    ESLint是一个QA工具,用来避免低级错误和统一代码的风格. ESLint被设计为完全可配置的,主要有两种方式来配置ESLint: 在注释中配置:使用JavaScript注释直接把配置嵌入到JS文件 ...

  3. 微信小程序组件解读和分析：八、checkbox复选项

    checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...

  4. testlink 从1.8.5 升级到 1.9.8

    step1:备份原 1.8.5 的数据库.   step2:分别下载 1.9.0 / 1.9.3 / 1.9.8 的安装包.   step3:分别解压 1.9.0 / 1.9.3 / 1.9.8 成3 ...

  5. PHP会话控制考察点

    为什么要使用会话控制技术 HTTP协议是无状态的,也就是说HTTP没有一个内建的机制来维护两个事务之间的状态.当一个用户完成一个请求发起第二个请求的时候,服务器无法知道这次请求是来自于上一次的客户.而 ...

  6. 迅为iTOP-4418/6818开发板MiniLinux下的GPS使用手册

    平台:iTOP-4418/6818开发板 系统:MiniLinux 在 Mini Linux 系统环境下 iTOP-4418 和 6818 的 GPS 实验调试步骤.给用户提供了“iTOP-4418- ...

  7. swift 待研备份

    https://www.ctolib.com/topics-115290.html 但是还是用到了一个叫做 The Protocol Witness Table (PWT) 的函数表 https:// ...

  8. CSS3 四边形 凹角写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. SqlServer数据库练习20190211

    一条update语句,修改多个条件 update orderdt_jimmy set qty = (case else qty end); 好了,就这样

  10. css滚动条样式修改

    .activeMoreBankList{ height: 188px; overflow-y: auto;} /*滚动条样式*/.activeMoreBankList::-webkit-scrollb ...