Question

我正在使用Reveal.JS来创建一些幻灯片，我已经建立了一个我想在PowerPoint中创建的示例，现在试图弄清楚如何在元素上使用CSS动画，或者如何使用自定义data-transitions滑入滑出。

该视频显示了简报演示文稿的滑入/滑出效果以及我对CSS实施的理解。

我的问题可以通过两种不同的解决方案来回答。

CSS，可以轻松地将它们应用到滑入或滑出过程中，从而创建这些PowerPoint效果。
对Reveal.js的插入或修改，使我能够处理输入/输出转换。

目标

HTML

<div class="reveal">

  <div class="slides">

    <section data-state='gq black' data-transition='none'>
      <div data-animate="fadeInGq" data-duration="5">
        <h1>Wooden
          <br/>Bowie</h1>
        <br />
        <h2>Hollywood Collection</h2>
      </div>
    </section>
  </div>
</div>

CSS

/* 
----------------------------------------------------------------------
Black Slides
----------------------------------------------------------------------
*/

.gq.black body {
  background: url('./line-vertical-white-100.svg'),  url('./circle-white-100.svg'), black;
  background-repeat: no-repeat;
  background-position: bottom -10px left 50px, top -110px right -290px;
  background-size: auto 82%, auto auto;
}
.gq.black .slides section {
  top: 100px !important;
}

.gq.black .reveal h1 {
  font-family: "Merriweather";
  font-style: italic;
  font-size: 2.77em;
  text-shadow: none;
  color: white;
  text-align: left;
}
.gq.black .reveal h2 {
  font-family: "Arial";
  font-family: "Trebuchet MS";
  font-style: italic;
  font-size: 1.75em;
  text-shadow: none;
  color: white;
  text-align: left;
}
.gq.black.fade-in .reveal h2 {
  color: red;
}

/* 
----------------------------------------------------------------------
White Slides
----------------------------------------------------------------------
*/

.gq.white body {
  background: url('./line-horizontal-black-100.svg'),  url('./circle-black-100.svg'), white;
  background-repeat: no-repeat;
  background-position: bottom 30px left, bottom -180px right -290px;
  background-size: 45% auto, auto auto;
}

.gq.white .reveal h1 {
  margin-right: 500px;
  text-align: right;
  text-transform: none;
  color: black;
}


.gq .reveal h2 {
  text-transform: none;
  font-family: "Arial";
  font-style: normal;
  font-size: 1.5em;
}

.gq.white .reveal h2 {
  margin-right: 500px;
  text-align: right;
  text-transform: none;
  color: black;
  font-weight: 100;
}

/* 
----------------------------------------------------------------------
Slide In Transition
----------------------------------------------------------------------
*/

@-webkit-keyframes fadeInGq {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-8%, 18%, 0);
    transform: translate3d(-8%, 18%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInGq {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-8%, 18%, 0);
    transform: translate3d(-8%, 18%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInGq {
  -webkit-animation-name: fadeInGq;
  animation-name: fadeInGq;
}

使用Reveal.JS模拟Power Point过渡-自定义滑入/滑出

0 个答案: