所属分类:网页特效-焦点图/幻灯片
<script src='js/jquery.min.js'></script>
<script src='js/mousewheel.js'></script>
<script src="js/jquery.touchSwipe.js"></script>
<script src="js/cubeTransition.js"></script>
为界面添加下面的基本CSS样式
* {
margin: 0;
padding: 0;
}
html, body {
overflow: hidden;
height: 100%;
}
#cubeTransition {
position: relative;
width: 100%;
height: 100%;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
}
#cubeTransition div {
min-height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
transform-style: preserve-3d;
font-size: 5em;
color: #fff;
display: none;
}
#cubeTransition h2 {
position: relative;
top: 200px;
margin: 0;
font-size: 1.5em;
text-align: center;
text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.1 );
}
.top { z-index: 9999 }
.rotateCubeTopOut {
transform-origin: 50% 100%;
animation: rotateCubeTopOut .6s both ease-in;
}
.rotateCubeTopIn {
transform-origin: 50% 0%;
animation: rotateCubeTopIn .6s both ease-in;
}
.rotateCubeBottomOut {
transform-origin: 50% 0%;
animation: rotateCubeBottomOut .6s both ease-in;
}
.rotateCubeBottomIn {
transform-origin: 50% 100%;
animation: rotateCubeBottomIn .6s both ease-in;
}
@keyframes
rotateCubeTopOut {
50% {
animation-timing-function: ease-out;
transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
}
100% {
opacity: .3;
transform: translateY(-100%) rotateX(90deg);
}
}
@keyframes
rotateCubeTopIn {
0% {
opacity: .3;
transform: translateY(100%) rotateX(-90deg);
}
50% {
animation-timing-function: ease-out;
transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
}
}
@keyframes
rotateCubeBottomOut {
50% {
animation-timing-function: ease-out;
transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
}
100% {
opacity: .3;
transform: translateY(100%) rotateX(-90deg);
}
}
@keyframes
rotateCubeBottomIn {
0% {
opacity: .3;
transform: translateY(-100%) rotateX(90deg);
}
50% {
animation-timing-function: ease-out;
transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
}
}
基本的页面HTML结构如下
<div id="cubeTransition">
<div><h2>cubeTransition.js<;/h2></div>
<div><h2>Elegant,<;/h2></div>
<div><h2>exected!<;/h2></div>
<div><h2>Simple.<;/h2></div>
</div>