Skip to content

Latest commit

 

History

History
163 lines (107 loc) · 3.94 KB

animation.md

File metadata and controls

163 lines (107 loc) · 3.94 KB
Raw

title: nodeppt 动效演示 speaker: 三水清 url: https://github.com/ksky521/nodeppt

Animation{.text-subtitle.animated.fadeInDown.delay-800}

nodeppt {.text-landing.animated.fadeInRight}

This is probably the best web presentation tool so far! {.text-intro.animated.fadeInUp.delay-800}

:fa-github: Github{.button.ghost.animated.flipInX.delay-1500}

使用 .animated 给元素添加动效

.animated.fadeInUp
.animated 添加的动效是自动播放的

h2.animated.fadeIn.slow {.fadeIn.animated.slow}

.animated.fadeIn.delay-800 {.fadeIn.animated.delay-800}

animate with {.text-subtitle}

.tobuild {.tada.animated.delay-500}

需要添加动效的元素添加 .tobuild + 动效class {.tobuild.fadeInRight}

.tobuild 动效是手动触发的 {.tobuild.fadeInLeft}

.build 子元素全部会被添加.tobuild

  • .build + .moveIn
  • .build + .moveIn
  • .build + .moveIn
  • .build + .moveIn
  • .build + .moveIn {.build.moveIn}
### **animate.css** + `.build`
  1. fadeIn{.bounce}
  2. swing{.swing}
  3. flash{.flash}
  4. pulse{.pulse}
  5. shake{.shake}
  6. bounceIn{.bounceIn}
  7. wobble{.wobble}
  8. fadeInLeft{.fadeInLeft}
  9. flipInX{.flipInX}
  10. tada{.tada}
  11. slideInUp{.slideInUp}
  12. jello{.jello}
  13. heartBeat{.heartBeat}
  14. fadeInUp{.fadeInUp}
  15. lightSpeedIn{.lightSpeedIn} {.text-cols.build}

nodeppt 使用 Prismjs 做语法高亮

:::column {.vertical-align}

  • .fadeInUp + .slow
  • Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)
  • Highlights inline code as well, not just code blocks
  • Highlights nested languages (CSS in HTML, JavaScript in HTML)
<article id="webslides">
  <!-- Slide 1 -->
  <section>
    <h1>Design for trust</h1>
  </section>
  <!-- Slide 2 -->
  <section class="bg-primary">
    <div class="wrap">
      <h2>.wrap = container (width: 90%)</h2>
    </div>
  </section>
</article>

:::

:fa-info-circle large: Autoplay Feature

Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually. {.text-intro}

.background.anim

# Design :for: understanding :::flexblock {.features.fadeInUp}

:100^%^: purpose

Businesses that people love

:fa-heart-o: Principles

Useful → Easy → Fast → Beautiful :::

::: div {.content-left.bg-trans-dark.animated.fadeInRight} !![](https://webslides.tv/static/images/logos/airbnb.svg .whitelogo)

Designing Experiences

自动播放的animate.css :::

View More Demos? {.text-serif.aligncenter}

* * * {.text-symbols}

* [:fa-th-large: Layout](./layout.html) * [:fa-magic: Animation](./animation.html) * [:fa-cube: Component](./component.html) * [:fa-youtube: Media](./media.html) * [:fa-css3: Classes](./index.html)

U work so hard, but 干不过 write PPTs {.animated.tada}

快使用 nodeppt 轻松搞定高大上PPT
nodeppt 助力你的人生逆袭之路！ {.text-into.animated.delay-800.fadeIn}

:fa-cloud-download: Github{.button.animated.delay-1s.fadeInUp}