<nav class="zzsc-demos"> <a class="current-demo" href="iml">Examples</a> <a href="#">Alabet</a> </nav>
</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、查看效果。
