前端实现ppt动画播放（H5+C3+JS+JQ）

本文链接：https://blog.csdn.net/qq_63656102/article/details/130270589

文章介绍了如何使用HTML5、JavaScript以及一些库如jQuery和C3来在网页上实现类似PPT的动画效果。通过animate()函数和keyframes规则定义动画，配合jquery.timers库控制时间，创建出炫酷的动态展示。同时，文章还提到了解决Chrome浏览器音频自动播放问题的方法。

摘要由CSDN通过智能技术生成

大家都应该用过ppt（Microsoft PowerPoint 2010）来做过一些可课件或者动画效果吧，其实，在ppt里面的动画在网页上也可以实现的，并且会更加炫酷。可以自己找个动画ppt来动动手实现一下吧！！！

先看一下效果：

前端实现ppt动画播放HTML5

先看看原理是怎么实现的吧，其实也很简单，无非是用到了js为我们封装好的一些动画库函数来实现的，加上自己的一些想法就可以实现

实现过程是用到了animate()的动画函数，自带回调函数，是很容易写出来的，在加上用了jquery.timers-1.1.2.js，这个是一个定时器的第三方库，用它来实现时间的把握也是很不错的，

然后就是还使用了C3的一些动画元素，比如定义一个动画：

@keyframes move {
    0%{
        width: 0;
    }
    100%{
        width: 50%;
    }
}

也可以用来定义一些简单动画。

结构上的话可以给大家来看一下我的结构搭建：

<body>
    <audio src="audio/鈴芽戶締.mp3"></audio>
    <div class="begin">
        <h1>开学第一课ppt开始了,请点击开始</h1>
    </div>
    <div class="one">
        <h1 class="top" style="color: #fff;">开学第一课</h1>
        <h1 class="bootom" style="color: #ffc000;">即将开场</h1>
    </div>
    <div class="two">
        <h1><span class="xin">新</span><span class="xue">学</span><span class="qi">期</span></h1>
    </div>
    <div class="three-eight">
        <h1></h1>   
    </div>
    <div class="eleven">
        <h1>“收心”</h1>
        <div class="white">
            <div class="black">   
            </div> 
        </div>
    </div>
    <div class="fourteen">
        <div class="scroll">
            <div class="bar"></div>
        </div>
    </div>

    <div class="fifteen">
        <h1>满血复活</h1>
        <img src="img/fifteen.jpg" alt="">
    </div>
    <div class="sixteen">
            <div>
                <h1>全力以赴</h1>
            </div>
    </div>

    <div class="eighteen">
        <h1><span>实</span><span>现</span></h1>
    </div>
    <div class="nine">
        <h1>自己的梦想</h1>
    </div>

    <div class="twenty">
       <ul>
        <li>当</li>
        <li>我</li>
        <li>们</li>
        <li>感</li>
        <li>觉</li>
       </ul>
    </div>
    <div class="twenty-one">
        <h1>命运</h1>
    </div>

    <div class="twenty-two">
        <h1>束缚了</h1>
    </div>
    <div class="twenty-three-six">
        <h1>我们的</h1>
    </div>
    <div class="twenty-seven">
        <h1>幸运之神的眷顾</h1>
    </div>
    <div class="twenty-eight">
        <h1>不如</h1>
    </div>
    <div class="twenty-nine">
        <img src="img/study.png" alt="">
    </div>
    <div class="thirty">
        <ul>
            <li>像</li>
            <li>哪</li>
            <li>吒</li>
            <li>一</li>
            <li>样</li>
        </ul>
    </div>
    <div class="thirty-one">
        <h1 class="left">竭尽全力奋斗一把</h1>
        <h1 class="rigth">竭尽全力奋斗一把</h1>
    </div>
    <div class="thirty-two">
        <h1>我命由我不由天</h1>
    </div>
    <div class="thirty-three">
        <h1>敢于</h1>
    </div>
    <div class="thirty-four">
        <h1>同命运抗争</h1>
    </div>
    <div class="thirty-seven-forty-one">
        <h1>不屈服</h1>
    </div>

    <div class="forty-two">
        <h1>不低头</h1>
    </div>
    <div class="forty-three">
        <h1>的精气神</h1>
    </div>
    <div class="forty-four">
        <h1>希望</h1>
    </div>
    <div class="forty-five">
        <h1 class="">同学们</h1>
    </div>
    <div class="forty-six">
        <h1 class="">每一天</h1>
    </div>
    <div class="forty-seven">
        <h1 class="">都保持</h1>
    </div>
    <div class="forty-eight">
        <h1>昂扬的斗志</h1>
    </div>
    <div class="fifty-fifty-four">
        <h1>大脑思考</h1>
    </div>
    <div class="fifty-five">
        <h1>在新的学年</h1>
    </div>
    <div class="fifty-six">
        <h1 class="">目标在前</h1>
    </div>
    <div class="fifty-seven">
        <h1>让我们</h1>
    </div>
    <div class="sixty">
        <h1>从此刻出发</h1>
    </div>
    <div class="sixty-one">
        <h1>释放潜力</h1>
    </div>
    <div class="sixty-two">
        <h1>追逐梦想</h1>
    </div>
    <div class="end">
        <h1>我命由我不由天</h1>
    </div>
</body>

可以看得到结构其实还是很简单的，就是简单的div布局

然后就是音乐的自动播放问题，因为谷歌浏览器是禁用了音频的自动播放，所以我一开始就得点击一下开始的同时去播放背景音乐，完美的解决了自动播放的尴尬问题,

 $("html").click(function(){

 var audio = document.querySelector("audio");
        
            document.addEventListener("click",function(){
            audio.play();
        })

}

好了，如果需要源码可以来私