nodeppt {.text-landing.text-shadow}

January 30, 2019 · View on GitHub

title: nodeppt 背景效果演示 speaker: 三水清 url: https://github.com/ksky521/nodeppt js: - background.js

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

nodeppt {.text-landing.text-shadow}

这可能是迄今为止最好的网页版演示库 {.text-intro}

:fa-github: Github{.button.ghost}

Backgrounds

<slide class="bg-apple">

点击切换背景class

  • .bg-primary{onclick="changeBackgroundColor('bg-primary')"}
  • .bg-secondary{onclick="changeBackgroundColor('bg-secondary')"}
  • .bg-light{onclick="changeBackgroundColor('bg-light')"}
  • .bg-black{onclick="changeBackgroundColor('bg-black')"}
  • .bg-black-blue{onclick="changeBackgroundColor('bg-black-blue')"}
  • .bg-red{onclick="changeBackgroundColor('bg-red')"}
  • .bg-blue{onclick="changeBackgroundColor('bg-blue')"}
  • .bg-green{onclick="changeBackgroundColor('bg-green')"}
  • .bg-purple{onclick="changeBackgroundColor('bg-purple')"}
  • .bg-trans-light{onclick="changeBackgroundColor('bg-trans-light')"}
  • .bg-trans-dark{onclick="changeBackgroundColor('bg-trans-dark')"}
  • .bg-apple{onclick="changeBackgroundColor('bg-apple')"}
  • .bg-gradient-h{onclick="changeBackgroundColor('bg-gradient-h')"}
  • .bg-gradient-r{onclick="changeBackgroundColor('bg-gradient-r')"}
  • .bg-gradient-v{onclick="changeBackgroundColor('bg-gradient-v')"} {.text-cols}
## Corporate Backgrounds :::flexblock {.blink.border}

.bg-primary {..bg-primary}

#44d

.bg-secondary {..bg-secondary}

#67d

.bg-light {..bg-light}

#edf2f7

body

#f7f9fb

:::

General Colors

:::flexblock {.blink.border}

.bg-black {..bg-black}

#111

.bg-black-blue {..bg-black-blue}

#123

.bg-white {..bg-white}

#fff :::

Colorful

:::flexblock {.border.blink}

.bg-red {..bg-red}

#c23

.bg-green {..bg-green}

#077

.bg-blue {..bg-blue}

#346

.bg-purple {..bg-purple}

#62b

:::

Transparent Backgrounds

:::flexblock {.border.blink}

.bg-trans-dark {..bg-trans-dark}

rgba(0, 0, 0, 0.5)

.bg-trans-light {..bg-trans-light}

rgba(255, 255, 255, 0.2)

:::

# Gradients

:::flexblock {.border}

Horizontal .bg-gradient-h

Radial .bg-gradient-r

Vertical .bg-gradient-v :::

## Vertical Gradient

.bg-gradient-v

## Radial Gradient

.bg-gradient-r

.background-video

WebSlides is the easiest way to make HTML presentations. Inspire and engage.

BG Video with Overlay {.text-landing}

<slide class="bg-blue aligncenter" video="https://webslides.tv/static/videos/working.mp4 poster='https://webslides.tv/static/images/working.jpg' .dark"> or .light

Youtube Background

<slide youtube=".dark id='_m67JbGjWnc' autoplay loop">

:::{.content-left}

.background-(position)

:::flexblock {.specs} ::fa-wifi::

Ultra-Fast WiFi

Simple and secure file sharing.

::fa-battery-full::

All day battery life

Your battery worries may be over.

::fa-life-ring::

All day battery life

We'll fix it or if we can't, we'll replace it.

:::

Iceland{.text-landing.text-shadow}

slide[class*="bg-"] > .background.dark

Iceland{.text-landing.text-shadow}

slide[class*="bg-"] > .background.light

.background.anim

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

* * * {.text-symbols}

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}