以下是 JS超酷图片翻动展示效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为JS超酷图片翻动展示效果，属于站长常用代码" />
<title>JS超酷图片翻动展示效果</title>
<link type="text/css" href="css/lrtk.css" rel="stylesheet" />
<link type="text/css" href="css/animation.css" rel="stylesheet" />
</head>
<body>
<!-- 代码 开始 -->
<div class="center major-list-outer">
<ul class="major-list">
<li class="major-item" id="dx"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
<li class="major-item" id="rj"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
<li class="major-item" id="jx"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
<li class="major-item" id="gdz"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
<li class="major-item" id="jsj"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
<li class="major-item" id="kz"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
<li class="major-item" id="jg"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
<li class="major-item" id="sx"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
<li class="major-item" id="gl"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
<li class="major-item" id="ch"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
<li class="major-item" id="wl"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
<li class="major-item" id="xw"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
</ul>
</div>
<!-- 代码 结束 -->
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
JS代码(main.js):
var hover_dir ={
wrapper:$(".major-list")[0],box:$(".major-item"),target:$(".back-face"),bindEvent:function(){
var mouse_pos,x,y,stop_bubble;
for(var i = 0;
i < hover_dir.box.length;
i++){
(function(n){
$.addEvent(hover_dir.box[n],"mouseover",function(event){
event = $.getEvent(event);
var relatedT = $.getRelatedTarget(event);
if(!$.contains(hover_dir.box[n],relatedT)){
var child = hover_dir.box[n].childNodes[0];
$.stopPropagation(event);
$.removeClass(hover_dir.target[n],"to-left") ||$.removeClass(hover_dir.target[n],"to-right") ||$.removeClass(hover_dir.target[n],"to-top") ||$.removeClass(hover_dir.target[n],"to-bottom");
x = event.pageX;
y = event.pageY;
mouse_pos ={
"x":x,"y":y}
;
var dir = $.get_dir(hover_dir.box[n],mouse_pos);
switch(dir){
case "left":$.addClass(hover_dir.target[n],"from-left");
break;
case "right":$.addClass(hover_dir.target[n],"from-right");
break;
case "top":$.addClass(hover_dir.target[n],"from-top");
break;
case "bottom":$.addClass(hover_dir.target[n],"from-bottom");
break;
default:break;
}
}
}
);
$.addEvent(hover_dir.box[n],"mouseout",function(event){
event = $.getEvent(event);
var relatedT = $.getRelatedTarget(event);
if(!$.contains(hover_dir.box[n],relatedT)){
$.removeClass(hover_dir.target[n],"from-left") ||$.removeClass(hover_dir.target[n],"from-right") ||$.removeClass(hover_dir.target[n],"from-top") ||$.removeClass(hover_dir.target[n],"from-bottom");
x = event.pageX;
y = event.pageY;
mouse_pos ={
"x":x,"y":y}
;
var dir = $.get_dir(hover_dir.box[n],mouse_pos);
switch(dir){
case "left":$.addClass(hover_dir.target[n],"to-left");
break;
case "right":$.addClass(hover_dir.target[n],"to-right");
break;
case "top":$.addClass(hover_dir.target[n],"to-top");
break;
case "bottom":$.addClass(hover_dir.target[n],"to-bottom");
break;
default:break;
}
}
}
);
}
)(i);
}
}
,init:function(){
hover_dir.bindEvent();
}
}
;
hover_dir.init();
JS代码(public.js):
Function.prototype.method = function(name,func){
if(!this.prototype[name]){
this.prototype[name] = func;
}
return this;
}
function $(targ){
if(typeof targ === "string"){
var first_letter = targ.substr(0,1),other_letter = targ.substr(1);
switch (first_letter){
case "#":return document.getElementById(other_letter);
break;
case ".":if (document.querySelectorAll){
return document.querySelectorAll(targ);
}
else{
var targArr = [];
function getNode(elem){
if(elem.className){
var classArr = elem.className.split(" ");
for(var i = 0;
i < classArr.length;
i++){
if(classArr[i] == other_letter){
targArr.push(elem);
break;
}
}
}
if(elem.childNodes.length){
for(var i = 0;
i < elem.childNodes.length;
i++){
if(elem.childNodes[i].nodeType == 1){
getNode(elem.childNodes[i]);
}
}
}
}
getNode(document.body);
return targArr;
}
break;
default:return document.getElementsByTagName(targ);
}
}
}
$.addClass = function(elem,newClass){
if(!elem)return false;
else if(!elem.className){
elem.className = newClass;
return false;
}
else{
var ownClass = elem.className.split(" "),had = false;
for(var i = 0;
i < ownClass.length;
i++){
if(ownClass[i] === newClass){
had = true;
break;
}
}
if(!had){
elem.className += " " + newClass;
}
return had;
}
}
;
$.removeClass = function(elem,oneClass){
if(!elem || !elem.className) return false;
var ownClass = elem.className.split(" "),had = false;
for(var i = 0;
i < ownClass.length;
i++){
if(ownClass[i] === oneClass){
ownClass.splice(i,1);
had = true;
break;
}
}
if(had){
elem.className = "";
if(ownClass.length < 1){
return had;
}
else if(ownClass.length == 1){
elem.className = ownClass[0];
}
else if(ownClass.length >1){
for(var i = 0;
i < ownClass.length;
i++){
if(i == ownClass.length - 1){
elem.className += ownClass[i];
}
else{
elem.className += ownClass[i] + " ";
}
}
}
}
return had;
}
;
$.addEvent = function(elem,eventName,handler){
if(elem){
if(elem.addEventListener){
return elem.addEventListener(eventName,handler,false);
}
else if(elem.attachEvent){
return elem.attachEvent("on" + eventName,handler);
}
else{
elem["on" + eventName] = handler;
}
}
}
;
$.removeEvent = function(elem,eventName,handler){
if(elem){
if(elem.removeEventListener){
return elem.removeEventListener(eventName,handler,false);
}
else if(elem.detachEvent){
return elem.detachEvent("on" + eventName,handler);
}
else{
elem["on" + eventName] = null;
}
}
}
;
$.getEvent = function(event){
return event ? event:window.event;
}
;
$.getTarget = function(event){
return event.target || event.srcElement;
}
;
$.getRelatedTarget = function(event){
return event.relatedTarget || event.toElement || event.fromElement || null;
}
;
$.contains = function(parent,cur){
while(cur.parentNode){
if(cur.parentNode === parent){
return true;
}
cur = cur.parentNode;
}
return false;
}
;
$.preventDefault = function(event){
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnValue = false;
}
}
;
$.stopPropagation = function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancleBubble = true;
}
}
;
$.get_pos = function(elem){
if(!elem) return false;
var left = elem.offsetLeft,top = elem.offsetTop,current = elem.offsetParent;
while(current !== null){
left += current.offsetLeft;
top += current.offsetTop;
current = current.offsetParent;
}
return{
"left":left,"top":top}
;
}
;
$.get_dir = function(elem,mouse_pos){
if(!elem) return false;
var pos = $.get_pos(elem),size ={
"width":elem.offsetWidth,"height":elem.offsetHeight}
,dx = mouse_pos.x - pos.left - size.width/2,dy = (mouse_pos.y - pos.top - size.height/2)*-1,eve_tan = dy/dx,tan = size.height/size.width;
if(dx != 0){
if(eve_tan > tan*-1 && eve_tan < tan && dx < 0){
return "left";
}
else if(eve_tan > tan*-1 && eve_tan < tan && dx > 0){
return "right";
}
else if((eve_tan > tan || eve_tan < tan*-1) && dy > 0){
return "top";
}
else if((eve_tan > tan || eve_tan < tan*-1) && dy <= 0){
return "bottom";
}
}
else if(dy > 0){
return "top";
}
else{
return "bottom";
}
}
;
function params(o){
//将要传给后台的参数转化为字符串，以加入到url中var arr = [];
for(var i in o){
arr.push(i + "=" + encodeURIComponent(o[i]));
}
return arr.join("&");
}
$.ajaxp = function(args){
//创建script节点，向后台请求js，src节点携带我的参数信息var script = document.createElement("script");
script.type="text/javascript";
script.src = args.url + "?" + params(args.params);
document.body.appendChild(script);
var time = setTimeout(args.params.callback + "()",6000);
//设置超时时间，觉得不妥可以更改script.onload = function(){
clearTimeout(time);
}
;
}
;
$.show_tips = function(words,timeout){
var tips = $('.tips')[0] || (function(){
var tips = document.createElement('div');
tips.className = 'tips animated';
return document.body.insertBefore(tips,document.body.firstChild);
}
)();
tips.innerHTML = words;
$.removeClass(tips,'hide');
$.addClass(tips,'show');
setTimeout($.hide_tips,timeout + 1000);
}
;
$.hide_tips = function(){
var tips = $('.tips')[0];
$.removeClass(tips,'show');
$.addClass(tips,'hide');
setTimeout('$.removeClass($(".tips")[0],"hide")',1000);
}
;
CSS代码(animation.css):
.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px) rotateX(-10deg);}
70%{-webkit-transform:perspective(400px) rotateX(10deg);}
100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}
}
@-moz-keyframes flipInX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-moz-transform:perspective(400px) rotateX(-10deg);}
70%{-moz-transform:perspective(400px) rotateX(10deg);}
100%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;}
}
@-ms-keyframes flipInX{0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-ms-transform:perspective(400px) rotateX(-10deg);}
70%{-ms-transform:perspective(400px) rotateX(10deg);}
100%{-ms-transform:perspective(400px) rotateX(0deg);opacity:1;}
}
@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{transform:perspective(400px) rotateX(-10deg);}
70%{transform:perspective(400px) rotateX(10deg);}
100%{transform:perspective(400px) rotateX(0deg);opacity:1;}
}
.flipInX{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInX;-moz-backface-visibility:visible !important;-moz-animation-name:flipInX;-ms-backface-visibility:visible !important;-ms-animation-name:flipInX;backface-visibility:visible !important;animation-name:flipInX;}
@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}
100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-moz-keyframes flipOutX{0%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;}
100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-ms-keyframes flipOutX{0%{-ms-transform:perspective(400px) rotateX(0deg);opacity:1;}
100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@keyframes flipOutX{0%{transform:perspective(400px) rotateX(0deg);opacity:1;}
100%{transform:perspective(400px) rotateX(90deg);opacity:0;}
}
.flipOutX{-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible !important;-moz-animation-name:flipOutX;-moz-backface-visibility:visible !important;-ms-animation-name:flipOutX;-ms-backface-visibility:visible !important;animation-name:flipOutX;backface-visibility:visible !important;}
@-webkit-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-ms-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
.fadeIn{height:100%;-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-ms-animation-name:fadeIn;animation-name:fadeIn;}
@-webkit-keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@-ms-keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
.fadeOut{-webkit-animation-name:fadeOut;-moz-animation-name:fadeOut;-ms-animation-name:fadeOut;animation-name:fadeOut;height:0;}
@-webkit-keyframes tada{0%{-webkit-transform:scale(1);}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}
100%{-webkit-transform:scale(1) rotate(0);}
}
@-moz-keyframes tada{0%{-moz-transform:scale(1);}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);}
}
@-ms-keyframes tada{0%{-ms-transform:scale(1);}
10%,20%{-ms-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
100%{-ms-transform:scale(1) rotate(0);}
}
@keyframes tada{0%{transform:scale(1);}
10%,20%{transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
100%{transform:scale(1) rotate(0);}
}
@-webkit-keyframes flash{0%,50%,100%{opacity:0;}
25%,75%{opacity:1;}
}
@-moz-keyframes flash{0%,50%,100%{opacity:0;}
25%,75%{opacity:1;}
}
@-ms-keyframes flash{0%,50%,100%{opacity:0;}
25%,75%{opacity:1;}
}
@keyframes flash{0%,50%,100%{opacity:0;}
25%,75%{opacity:1;}
}
@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);}
60%{opacity:1;-webkit-transform:translateY(-30px);}
80%{-webkit-transform:translateY(10px);}
100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceInUp{0%{opacity:0;-moz-transform:translateY(2000px);}
60%{opacity:1;-moz-transform:translateY(-30px);}
80%{-moz-transform:translateY(10px);}
100%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceInUp{0%{opacity:0;-ms-transform:translateY(2000px);}
60%{opacity:1;-ms-transform:translateY(-30px);}
80%{-ms-transform:translateY(10px);}
100%{-ms-transform:translateY(0);}
}
@keyframes bounceInUp{0%{opacity:0;transform:translateY(2000px);}
60%{opacity:1;transform:translateY(-30px);}
80%{transform:translateY(10px);}
100%{transform:translateY(0);}
}
.animated.bounceInUp{-webkit-animation-name:bounceInUp;-moz-animation-name:bounceInUp;-ms-animation-name:bounceInUp;animation-name:bounceInUp;}
@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);}
60%{opacity:1;-webkit-transform:translateY(30px);}
80%{-webkit-transform:translateY(-10px);}
100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translateY(-2000px);}
60%{opacity:1;-moz-transform:translateY(30px);}
80%{-moz-transform:translateY(-10px);}
100%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceInDown{0%{opacity:0;-ms-transform:translateY(-2000px);}
60%{opacity:1;-ms-transform:translateY(30px);}
80%{-ms-transform:translateY(-10px);}
100%{-ms-transform:translateY(0);}
}
@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px);}
60%{opacity:1;transform:translateY(30px);}
80%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}
.animated.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-ms-animation-name:bounceInDown;animation-name:bounceInDown;}
@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);}
60%{opacity:1;-webkit-transform:translateX(30px);}
80%{-webkit-transform:translateX(-10px);}
100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceInLeft{0%{opacity:0;-moz-transform:translateX(-2000px);}
60%{opacity:1;-moz-transform:translateX(30px);}
80%{-moz-transform:translateX(-10px);}
100%{-moz-transform:translateX(0);}
}
@-ms-keyframes bounceInLeft{0%{opacity:0;-ms-transform:translateX(-2000px);}
60%{opacity:1;-ms-transform:translateX(30px);}
80%{-ms-transform:translateX(-10px);}
100%{-ms-transform:translateX(0);}
}
@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px);}
60%{opacity:1;transform:translateX(30px);}
80%{transform:translateX(-10px);}
100%{transform:translateX(0);}
}
.animated.bounceInLeft{-webkit-animation-name:bounceInLeft;-moz-animation-name:bounceInLeft;-ms-animation-name:bounceInLeft;animation-name:bounceInLeft;}
@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);}
60%{opacity:1;-webkit-transform:translateX(-30px);}
80%{-webkit-transform:translateX(10px);}
100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceInRight{0%{opacity:0;-moz-transform:translateX(2000px);}
60%{opacity:1;-moz-transform:translateX(-30px);}
80%{-moz-transform:translateX(10px);}
100%{-moz-transform:translateX(0);}
}
@-ms-keyframes bounceInRight{0%{opacity:0;-ms-transform:translateX(2000px);}
60%{opacity:1;-ms-transform:translateX(-30px);}
80%{-ms-transform:translateX(10px);}
100%{-ms-transform:translateX(0);}
}
@keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px);}
60%{opacity:1;transform:translateX(-30px);}
80%{transform:translateX(10px);}
100%{transform:translateX(0);}
}
.animated.bounceInRight{-webkit-animation-name:bounceInRight;-moz-animation-name:bounceInRight;-ms-animation-name:bounceInRight;animation-name:bounceInRight;}
@-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes slideInRight{0%{opacity:0;-moz-transform:translateX(2000px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes slideInRight{0%{opacity:0;-ms-transform:translateX(2000px);}
100%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes slideInRight{0%{opacity:0;transform:translateX(2000px);}
100%{opacity:1;transform:translateX(0);}
}
@-webkit-keyframes slideOutLeft{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(-2000px);}
}
@-moz-keyframes slideOutLeft{0%{opacity:1;-moz-transform:translateX(0);}
100%{opacity:0;-moz-transform:translateX(-2000px);}
}
@-ms-keyframes slideOutLeft{0%{opacity:1;-ms-transform:translateX(0);}
100%{opacity:0;-ms-transform:translateX(-2000px);}
}
@keyframes slideOutLeft{0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(-2000px);}
}
/* Above all are from animate.css by daneden http://daneden.me/animate/ */
.from-top{-webkit-transform-origin:0% 0%;-moz-transform-origin:0% 0%;-ms-transform-origin:0% 0%;transform-origin:0% 0%;}
.from-left{-webkit-transform-origin:0% 100%;-moz-transform-origin:0% 100%;-ms-transform-origin:0% 100%;transform-origin:0% 100%;}
.from-top,.from-left{-webkit-animation:enter-clockwise 0.23s ease-out;-moz-animation:enter-clockwise 0.23s ease-out;-ms-animation:enter-clockwise 0.23s ease-out;animation:enter-clockwise 0.23s ease-out;}
.from-right{-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%;}
.from-bottom{-webkit-transform-origin:0% 100%;-moz-transform-origin:0% 100%;-ms-transform-origin:0% 100%;transform-origin:0% 100%;}
.from-right,.from-bottom{-webkit-animation:enter-anti-clockwise 0.23s ease-out;-moz-animation:enter-anti-clockwise 0.23s ease-out;-ms-animation:enter-anti-clockwise 0.23s ease-out;animation:enter-anti-clockwise 0.23s ease-out;}
.to-top{-webkit-transform-origin:0% 0%;-moz-transform-origin:0% 0%;-ms-transform-origin:0% 0%;transform-origin:0% 0%;}
.to-left{-webkit-transform-origin:0% 100%;-moz-transform-origin:0% 100%;-ms-transform-origin:0% 100%;transform-origin:0% 100%;}
.to-top,.to-left{-webkit-animation:leave-anti-clockwise 0.23s ease-out;-moz-animation:leave-anti-clockwise 0.23s ease-out;-ms-animation:leave-anti-clockwise 0.23s ease-out;animation:leave-anti-clockwise 0.23s ease-out;}
.to-right{-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%;}
.to-bottom{-webkit-transform-origin:0% 100%;-moz-transform-origin:0% 100%;-ms-transform-origin:0% 100%;transform-origin:0% 100%;}
.to-right,.to-bottom{-webkit-animation:leave-clockwise 0.23s ease-out;-moz-animation:leave-clockwise 0.23s ease-out;-ms-animation:leave-clockwise 0.23s ease-out;animation:leave-clockwise 0.23s ease-out;}
@-webkit-keyframes enter-clockwise{from{z-index:3;-webkit-transform:rotate(-90deg);}
to{z-index:3;-webkit-transform:rotate(0deg);}
}
@-moz-keyframes enter-clockwise{from{z-index:3;-moz-transform:rotate(-90deg);}
to{z-index:3;-moz-transform:rotate(0deg);}
}
@-ms-keyframes enter-clockwise{from{z-index:3;-ms-transform:rotate(-90deg);}
to{z-index:3;-ms-transform:rotate(0deg);}
}
@keyframes enter-clockwise{from{z-index:3;transform:rotate(-90deg);}
to{z-index:3;transform:rotate(0deg);}
}
@-webkit-keyframes enter-anti-clockwise{from{z-index:3;-webkit-transform:rotate(90deg);}
to{z-index:3;-webkit-transform:rotate(0deg);}
}
@-moz-keyframes enter-anti-clockwise{from{z-index:3;-moz-transform:rotate(90deg);}
to{z-index:3;-moz-transform:rotate(0deg);}
}
@-ms-keyframes enter-anti-clockwise{from{z-index:3;-ms-transform:rotate(90deg);}
to{z-index:3;-ms-transform:rotate(0deg);}
}
@keyframes enter-anti-clockwise{from{z-index:3;transform:rotate(90deg);}
to{z-index:3;transform:rotate(0deg);}
}
@-webkit-keyframes leave-clockwise{from{z-index:3;-webkit-transform:rotate(0deg);}
to{z-index:3;-webkit-transform:rotate(90deg);}
}
@-moz-keyframes leave-clockwise{from{z-index:3;-moz-transform:rotate(0deg);}
to{z-index:3;-moz-transform:rotate(90deg);}
}
@-ms-keyframes leave-clockwise{from{z-index:3;-ms-transform:rotate(0deg);}
to{z-index:3;-ms-transform:rotate(90deg);}
}
@keyframes leave-clockwise{from{z-index:3;transform:rotate(0deg);}
to{z-index:3;transform:rotate(90deg);}
}
@-webkit-keyframes leave-anti-clockwise{from{z-index:3;-webkit-transform:rotate(0deg);}
to{z-index:3;-webkit-transform:rotate(-90deg);}
}
@-moz-keyframes leave-anti-clockwise{from{z-index:3;-moz-transform:rotate(0deg);}
to{z-index:3;-moz-transform:rotate(-90deg);}
}
@-ms-keyframes leave-anti-clockwise{from{z-index:3;-ms-transform:rotate(0deg);}
to{z-index:3;-ms-transform:rotate(-90deg);}
}
@keyframes leave-anti-clockwise{from{z-index:3;transform:rotate(0deg);}
to{z-index:3;transform:rotate(-90deg);}
}
@-webkit-keyframes slideDown{from{-webkit-transform:translateY(-75px);}
to{-webkit-transform:translateY(0px);}
}
@-moz-keyframes slideDown{from{-moz-transform:translateY(-75px);}
to{-moz-transform:translateY(0px);}
}
@-ms-keyframes slideDown{from{-ms-transform:translateY(-75px);}
to{-ms-transform:translateY(0px);}
}
@keyframes slideDown{from{transform:translateY(-75px);}
to{transform:translateY(0px);}
}
@-webkit-keyframes slideUp{from{-webkit-transform:translateY(0px);}
to{-webkit-transform:translateY(-75px);}
}
@-moz-keyframes slideUp{from{-moz-transform:translateY(0px);}
to{-moz-transform:translateY(-75px);}
}
@-ms-keyframes slideUp{from{-ms-transform:translateY(0px);}
to{-ms-transform:translateY(-75px);}
}
@keyframes slideUp{from{transform:translateY(0px);}
to{transform:translateY(-75px);}
}
@-webkit-keyframes bounceStrenth{0%{opacity:0;-webkit-transform:scale(0);}
60%{opacity:1;-webkit-transform:scale(1.2);}
100%{-webkit-transform:scale(1);}
}
@-moz-keyframes bounceStrenth{0%{opacity:0;-moz-transform:scale(0);}
60%{opacity:1;-moz-transform:scale(1.2);}
100%{-moz-transform:scale(1);}
}
@-ms-keyframes bounceStrenth{0%{opacity:0;-ms-transform:scale(0);}
60%{opacity:1;-ms-transform:scale(1.2);}
100%{-ms-transform:scale(1);}
}
@keyframes bounceStrenth{0%{opacity:0;transform:scale(0);}
60%{opacity:1;transform:scale(1.2);}
100%{transform:scale(1);}
}
@-webkit-keyframes bounceBigStrenth{0%{opacity:0;-webkit-transform:scale(0);}
60%{opacity:1;-webkit-transform:scale(1.4);}
100%{-webkit-transform:scale(1);}
}
@-moz-keyframes bounceBigStrenth{0%{opacity:0;-moz-transform:scale(0);}
60%{opacity:1;-moz-transform:scale(1.4);}
100%{-moz-transform:scale(1);}
}
@-ms-keyframes bounceBigStrenth{0%{opacity:0;-ms-transform:scale(0);}
60%{opacity:1;-ms-transform:scale(1.4);}
100%{-ms-transform:scale(1);}
}
@keyframes bounceBigStrenth{0%{opacity:0;transform:scale(0);}
60%{opacity:1;transform:scale(1.4);}
100%{transform:scale(1);}
}
@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spin{from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spin{from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
@keyframes spin{from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
CSS代码(lrtk.css):
/* CSS Document */
html{color:#444333;background-color:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-rendering:optimizelegibility;min-width:960px}
html,body,section,div,p,h1,form,input,textarea,label,ol,ul,li,h1,h2,h3{margin:0;padding:0}
ol li{list-style-position:inside}
ul li{list-style:none}
::selection{color:#fff;background-color:rgb(10,77,0)}
.center{display:block;width:960px;margin:30px auto;position:relative}
/*for-majors*/
.major-list-outer{height:573px;overflow:hidden}
.major-list{margin-right:-32px;margin-bottom:-30px;*margin-bottom:0px}
.major-list li{width:216px;height:169px;margin-right:32px;margin-bottom:32px;float:left;position:relative}
.major-list li a,.major-list li a span{width:100%;height:100%;display:block;position:absolute;left:0;top:0}
.front-face{z-index:2;background:url(../images/majors.png) no-repeat 0 0}
.back-face{z-index:1;background:url(../images/majors_back.jpg) no-repeat 0 0}
.major-list li a{overflow:hidden}
.major-list li:hover a .back-face{z-index:3;}
#dx .front-face,#dx .back-face{background-position:0 0}
#rj .front-face,#rj .back-face{background-position:-217px 0}
#jx .front-face,#jx .back-face{background-position:-434px 0}
#gdz .front-face,#gdz .back-face{background-position:-651px 0}
#jsj .front-face,#jsj .back-face{background-position:0 -170px}
#kz .front-face,#kz .back-face{background-position:-217px -170px}
#jg .front-face,#jg .back-face{background-position:-434px -170px}
#sx .front-face,#sx .back-face{background-position:-651px -170px}
#gl .front-face,#gl .back-face{background-position:-0 -340px}
#ch .front-face,#ch .back-face{background-position:-217px -340px}
#wl .front-face,#wl .back-face{background-position:-434px -340px}
#xw .front-face,#xw .back-face{background-position:-651px -340px}
/*for-majors ending here*/
.btm{margin:30px auto}
.btm p{font:normal 12px/24px 'Microsoft YaHei';text-align:center}
分享到QQ
分享到微博
微信扫一扫
