<link rel="stylesheet" type="text/css" href="https://unpkg.com/webppt@1.0.11/dist/style.css" />
<script src="https://unpkg.com/webppt@1.0.11/dist/index.min.js"></script>

    <style>
		body {background-color: aliceblue;}
       .page {color: #333;background-color: lightpink;}
    </style>
	<div class="webppt-wrap">
		<div class="page">第1页</div>
		<div class="page">第2页</div>
		<div class="page">第3页</div>
	</div>
	<script>
		Webppt.start()
	</script>

    <style>
		body {background-color: aliceblue;}
       .page {color: #333;background-color: lightpink;}
    </style>
	<div class="webppt-wrap">
		<div class="page">
		   <div class="slide"><p>第1页第1张</p></div>
		   <div class="slide"><p>第1页第2张</p></div>
		</div>
		<div class="page">第2页</div>
		<div class="page">第3页</div>
	</div>
	<script>
		Webppt.start()
	</script>

    <style>
		body {background-color: aliceblue;}
       .page {color: #333;background-color: lightpink;}
	   .slide{background-color: coral;}
    </style>
	<div class="webppt-wrap">
		<div class="page" data-animation="1">
		   <div class="slide"><p>第1页第1张，转场效果在父标签的data-animation属性设置</p></div>
		   <div class="slide" data-animation="66"><p>第1页第2张，转场效果在本class="slide"标签的data-animation属性设置</p></div>
		   <div class="slide" data-animation="67"><p>第1页第3张</p></div>
		</div>
		<div class="page">第2页</div>
		<div class="page">第3页</div>
	</div>
	<script>
		Webppt.start()
	</script>

	<div class="webppt-wrap">
		<div class="page" data-animation="1">
		   <div class="slide"><p class="page-center pt-page-rotateCubeLeftIn pt-page-delay500">第1页第1张，设置p标签动画效果</p></div>
		   ...
		</div>
		...
	</div>
	<script>
		Webppt.start()
	</script>

   /*给p标签添加Animate.css动画类，需要在后面添加pt-page-delay500样式类*/
	<div class="webppt-wrap">
		<div class="page" data-animation="1">
		  .....
		   <div class="slide" data-animation="66">
		       <p class="page-center animate__animated animate__rubberBand pt-page-delay500">第1页第2张</p>
		   </div>
		  ....
		</div>
	</div>

	<div class="webppt-wrap">
		<div class="page" data-animation="1">
		  .....		  
		</div>
		<div class="css_icon img-up pt-page-moveIconUp"></div>
		<div class="css_icon img-left pt-page-moveIconLeft"></div>
		<div class="css_icon img-right pt-page-moveIconRight"></div>
	</div>

   /*给p标签添加Animate.css动画类，需要在后面添加pt-page-delay500样式类*/
	<div class="webppt-wrap">
		<div class="page" data-animation="1">
		  .....		  
		</div>
		<div class="screenfull-menu">全屏</div>
	</div>

   <div class="md-modal md-effect-4">
   	<div class="md-body">
   		<h3 class="md-title">
   			<span>操作选项</span>
   			<button class="btn md-close">关闭</button>
   		</h3>
   		<div class="md-content">
   			<ul>
   				<li>上一页</li>
   				<li>下一页</li>
   				<li>结束放映</li>
   			</ul>
   		</div>
   		<div class="md-footer"></div>
   	</div>
   </div>
   <script>
   	Webppt.start().contextmenu();//设置上下文
   </script>

npm install webppt
//导入
import webppt from 'webppt';
import 'webppt/dist/style.css'

<div class='preload-bg' data-src='img/css_sprite01.png'></div>。