css3 模拟标牌震荡效果
2024-09-07 15:21:25
<!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 模拟标牌震荡效果
最新文章
- ORM系列之二:EF(5) Model First
- [转]XSS现代WAF规则探测及绕过技术
- 51Nod 1136 欧拉函数 Label:数论
- MySQL部分1
- LAMP环境 源码包安装
- Xshell下漂亮的开发环境配置
- Tomcat相关目录及配置文件总结
- hdfs-over-ftp安装与配置
- .net md5
- 分享一个Maven的架构,以及在Maven配置中的注意事项
- CF 246E. Blood Cousins Return [dsu on tree STL]
- java.util.concurrent.Executors类的常用方法介绍
- AT89S52最小系统
- Android创建或删除了文件,在电脑端查看的时候,却没有对应的变化,处理办法
- chrome driver 下载
- (一)从设计的角度来看ADT(Java)
- route
- MySQL8.0手动安装心得。
- Spring MVC 视图及视图解析器
- java实现从url路径中下载pdf文档到本地