先我們需要知道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>

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