HTML5分段式SVG文字动画

  </header>

  <section class="content">

    <ul class="list">

      <li class="list__item color-1">

        <h3 class="list__text">ashin</h3>

        <button class="control__button control__button--play" aria-label="Trigger ation"> <svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 60 60">

        <use xlink:href="#icon-play"></use>

        </svg> </button>

      </li>

      <li class="list__item color-2">

        <h3 class="list__text">bogyoke</h3>

        <button class="control__button control__button--play" aria-label="Trigger anation"> <svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 60 60">

        <use xlink:href="#icon-play"></use>

        </svg> </button>

      </li>

      <li class="list__item color-3">

        <h3 class="list__text">nang</h3>

        <button class="control__button control__button--play" aria-label="Trigger mation"> <svg class="control__vector" aria-hidden="true" role="img" viewBox="0 0 60 60">

        <use xlink:href="#icon-play"></use>

        </svg> </button>

      </li>

3、书写css代码。

.related a:hover, .related a:active { opacity: 1; }

.related a img { max-width: 100%; opacity: 0.8; border-radius: 4px; }

.related a:hover img, .related a:active img { opacity: 1; }

.related h3 { font-family: "Microsoft YaHei", sans-serif; }

.related a h3 { font-weight: 300; margin-top: 0.15em; color: #fff; }

/* icomoon */

.icon-zzsc-home-outline:before { content: "\e5000"; }

.icon-zzsc-arrow-forward-outline:before { content: "\e5001"; }

 @media screen and (max-width: 50em) {

.demo-1 .zzsc-header { background: none; }

.demo-1 .zzsc-header h1 { font-size: 8vw; }

.grid__item { width: 100%; }

}

 @media screen and (max-width: 40em) {

.zzsc-header h1 { font-size: 1.85em; }

}

4、书写并添加js代码。

<script>

(function() {

var decoLetter = new Letters(document.querySelector('.deco'), {

size: 1000,

weight: 5,

color: '#212028',

//color: '#63646B',

duration: 2,

fade:0,

easing: d3_ease.easeExpOut.ease

});

decoLetter.hideInstantly();

setTimeout(function() {

decoLetter.show();

}, 200);

})();

</script> 

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

<script src="js/demo-1.js"></script>

5、代码整体结构。

6、查看效果。