（转）使用reveal.js制作一个酷炫的网页ppt

转：https://blog.csdn.net/qq_37954086/article/details/80541224

1、准备工作
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>reveal.js</title>
        <!-- reveal基本的css  -->
        <link rel="stylesheet" href="revealmaster/css/reveal.css">
        <!-- 引入黑色主题 -->
        <link rel="stylesheet" href="revealmaster/css/theme/black.css">
        <!-- 用于显示代码高亮 -->
        <link rel="stylesheet" href="revealmaster/lib/css/zenburn.css">

    </head>
    <body>

        <!-- reveal基本的js，里面集成了一些转场动画 -->
        <script src="revealmaster/js/reveal.js"></script>
        <!-- 这里省略引入css代码，记得加上 -->
        <div class="reveal">
            <!-- 所有的幻灯片都放在一个类为slides的div中 -->
            <div class="slides">

            <!-- 每一个<section>块都生成一张单独ppt -->
                <section>
                    <!-- ppt标题 -->
                    <h1>How to use jQuery</h1>
                    <!-- ppt正文 -->
                    <p>
                        <small>Presented by <a href="">MayanDev</a></small>
                    </p>
                </section>
                <!-- 以上Section第一页及内容 -->
                <!-- 第二页 -->
                <section>

                    <!-- section中还可以包含section，放映的方式为向下放映 -->
                        <section>
                            <h2>Hello There</h2>
                            <!-- fragment类表示分条显示，当键盘按下?键时触发 -->
                            <p class="fragment">Today, we are gonna talk about the jQuery.</p>
                            <!-- 添加一个图片链接 -->
                            <a class="fragment" href="http://jquery.com/download/"><img width="240" height="180" data-src="images/ztreefresh.gif" alt="jquery_logo"></a>
                        </section>
                        <!-- 通过data-background熟悉可以设置幻灯片的背景颜色或者图片，甚至可以使用视频当作背景 -->
                        <section  data-background="#dddddd">
                            <h2>But then, Believe me...</h2>
                            <p class="fragment">You need some HTML,CSS and JavaScript skills to be able to use jQuery effectively.
                        </section>
                </section>

                
                
            </div>
        </div>
        <!-- 这里省略引入js代码，记得加上 -->
        <script type="text/javascript">
            // 初始化页面
            //Reveal.initialize();
            
        </script>
        <script type="text/javascript">
            // 初始化页面
            Reveal.initialize({
            controls: true,        // 是否显示左下角的控制键，默认为true
            progress: true,        // 是否显示进度条，默认为true
            center: true,        // 是否在中间显示，默认为true
            // transition为页之间的切换动画，默认为slide，即水平滑动，这里我们改成zoom缩放试试
            transition: 'zoom', // none/fade/slide(default)/convex/concave/zoom
        });
        </script>

        
    </body>
</html>
2.效果：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wangle1001986/p/12470108.html