1、准备好需要用到的图标字体。
3、书写hmtl代码。<div class="container"> <div class="content"> <div class="row"> <div class="box box--centered"> <div role="button" tabindex="0" aria-label="Download" class="Download" data-progressbar-label="Downloading item..."></div> <br> </div> <div class="box"> </div> </div> <div class="row"> <div class="box box--centered"> <div role="button" tabindex="0" aria-label="Download" class="Download" data-progressbar-label="Downloading item..."></div> <br> </div> <div class="box"> </div> </div> <div class="row"> <div class="box box--centered"> <div role="button" tabindex="0" aria-label="Download" class="Download" data-progressbar-label="Downloading item..."></div> <br> </div> <div class="box"> </div> </div> </div>
5、书写并添加js代码。<script src="js/jquery.min.js"></script><script src="js/TweenMax.min.js"></script><script src="js/elastic-progress.js"></script><script src="js/main.js"></script>
7、查看效果。
