<!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 模拟标牌震荡效果