文章标题

来源：互联网发布：僵尸题材单机游戏知乎编辑：程序博客网时间：2024/06/06 04:35

帧动画

样式

     *{margin: 0;padding: 0}     .main{width: 1000px;height: 409px;margin: 0 auto;position: relative}     .picture_box{width: 1000px;height: 409px; transform-style: preserve-3d;perspective: 600px;}/* transform-style: preserve-3d 指明3D动画;perspective: 600px;景深*/    .picture_box div{width: 1000px;height: 409px;position: absolute;left: 0;top: 0; transform: rotateX(0deg);transform-origin: bottom;opacity: 0}/*transform-origin: bottom;指明绕那轴底部转动*/  .picture_box div:nth-child(1){background-image: url("images/1.jpg");opacity: 1}  .picture_box div:nth-child(2){background-image: url("images/2.jpg")}  .picture_box div:nth-child(3){background-image: url("images/3.jpg")}   .picture_box div:nth-child(4){background-image: url("images/4.jpg")}   .picture_box div:nth-child(5){background-image: url("images/5.jpg")}  .picture_box div:nth-child(6){background-image: url("images/6.jpg")}  .nav div{width: 45px;height: 45px;position: absolute;top: 45%}  .nav .pre{background-image: url("images/l.png");left: -60px;}   .nav .next{background-image: url("images/r.png");right: -60px;} @keyframes hide {     0%{transform: rotateX(0deg);opacity: 1}     100%{transform: rotateX(-180deg);opacity: 0}  } .hide{animation: hide 2s forwards} @keyframes show {    0%{transform: rotateX(180deg);opacity: 0}     100%{transform: rotateX(0deg);opacity:1}  } .show{animation: show 2s forwards}/*forwards表示停在最后一帧*/

结构

<div class="main">    <div class="picture_box">        <div ></div>        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>    </div>    <div class="nav"><!--左右按钮-->        <div class="pre"></div>        <div class="next"></div>    </div></div>

代码

 <script type="text/javascript" src="js/jquery-3.1.0.js"></script><script> $(function () {     var content=0;    $('.pre').on('click',function () {        $('.picture_box div').eq(content).removeClass('show').addClass('hide');         content--;          if(content<=-1){content=5}         $('.picture_box div').eq(content).addClass('show').removeClass('hide')          });  $('.next').on('click',function () {       $('.picture_box div').eq(content).removeClass('show').addClass('hide');           content++;           if(content>=6){content=0}       $('.picture_box div').eq(content).addClass('show').removeClass('hide')})        })  </script>

0 0