html实现ppt效果页面,CSS3+JavaScript实现翻页幻灯片效果

先上效果图

*{

margin: 0;

padding: 0;

}

#content{

width: 500px;

height: 300px;

margin: 40px auto;

position: relative;

transform-style: preserve-3d;

}

#content>div{

width: 100%;

height: 100%;

position: absolute;

transform-origin: center bottom;

}

#content img{

width: 100%;

height: 100%;

}

#next{

position: absolute;

top:190px;

left: calc(33% - 60px);

}

#prev{

position: absolute;

top: 190px;

left: calc(68% + 30px);

}

@keyframes next{ //创建一个动画这是一个翻到下面的效果

from{

-wbelit-transform: perspective(1000px) rotateX(0deg); /* 开始位置是 0°*/

opacity: 1; //初始透明为1

}

to{

-webkit-transform: perspective(1000px) rotateX(-180deg); /*结束位置是 180°*/

opacity: 0; //结束透明为0

}

}

@keyframes prev{ //创建一个由上边翻到上边的动画

0%{

-webkit-transform: perspective(1000px) rotateX(180deg); /* 初始开始位置 */

opacity:0; //初始为透明

}

57%

{

-webkit-transform: perspective(1000px) rotateX(-16deg); /* 动画进行到 56% 的时候他为 -16° */

opacity:1; //透明已经为1 了

}

66%

{

-webkit-transform: perspective(1000px) rotateX(14deg); /* 再回到 14° 的位置 */

}

74%

{

-webkit-transform: perspective(1000px) rotateX(-12deg); /* 再回到 -12°的位置 */

}

81%

{

-webkit-transform: perspective(1000px) rotateX(10deg); /* 再回到 10°的位置 */

}

87%

{

-webkit-transform: perspective(1000px) rotateX(-8deg); /* 再回到 -8°的位置 */

}

92%

{

-webkit-transform: perspective(1000px) rotateX(6deg); /* 再回到 6° 的位置 */

}

96%

{

-webkit-transform: perspective(1000px) rotateX(-4deg); /* 再回到 -4° 的位置 */

}

100%

{

-webkit-transform: perspective(1000px) rotateX(0deg); /* 最后回归 0° */

}

}

.next{

animation: next 1s ease 1 normal 0s; /* 执行向下的动画 */

transform: rotateX(-180deg); /* 因为初始位置是0 但当你执行完动画还会回到原位 所以它转到哪里就把他设在哪里不要再让它回去了 */

opacity: 0;

}

.prev{

animation: prev 1.2s ease 1 normal 0s; /* 执行向上的动画 */

transform: rotateX(0deg); /* 同上 */

opacity: 1;

}

←→

window.οnlοad=function(){

var next=document.getElementById("next");

var prev=document.getElementById("prev");

var content=document.getElementById("content");

var oDiv=content.getElementsByTagName("div");

var x=0;

next.οnclick=function(){ //当向下翻页时

oDiv[x].setAttribute("class","next"); //第一个页 设置class名让他向下走去

x++

if(x>oDiv.length-1){

x=0

}

oDiv[x].setAttribute("class","prev"); //++过后让他的下一个页面起来

}

prev.οnclick=function(){ //同上只是++变--

oDiv[x].setAttribute("class","next");

x--

if(x<0){

x=oDiv.length-1

}

oDiv[x].setAttribute("class","prev");

}

}

以上所述是小编给大家介绍的CSS3+JavaScript实现翻页幻灯片效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！