先我们需要知道package control，package control是一个为了方便管理插件的插件，使用package control我们可以通过安装插件的方式来实现在浏览器中预览HTML5文件。

然后是安装package control，到package control官网（https://packagecontrol.io/installation）复制安装代码，如下图所示：

然后回到sublime text，点击view中的Show Console打开控制台

将所复制的代码粘贴至控制台，按回车键

然后按shift+command+P键，输出Broswer，找到View In Broswer插件，选中点击回车

安装成功后再sublime text界面右键便能找到View In Broswer插件了

多特效代码请添加HTML5前端交流群581549454

HTML5交互式动画效果文件夹预览查看特效是一款当鼠标经过的时候文件夹里面的图片悬停显示预览效果。

js代码

<script src="js/anime.min.js"></script>

<script src="js/charming.min.js"></script>

<script src="js/main.js"></script>

<script>

(function() {

new DeviFx(document.querySelector('.content--devi .folder--devi'));

new RudrasFx(document.querySelector('.content--rudras .folder--rudras'));

new ArdraFx(document.querySelector('.content--ardra .folder--ardra'));

new ShaktiFx(document.querySelector('.content--shakti .folder--shakti'));

new KuberaFx(document.querySelector('.content--kubera .folder--kubera'));

new HariFx(document.querySelector('.content--hari .folder--hari'));

new RaviFx(document.querySelector('.content--ravi .folder--ravi'));

new DurgaFx(document.querySelector('.content--durga .folder--durga'));

new NandiFx(document.querySelector('.content--nandi .folder--nandi'));

})();

</script>

由于代码过多，这里只展示了部分代码，全部代码大家可以在群文件中查找！