<!DOCTYPE html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>18种基于anime.js的文字动画特效</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Arapey|Archivo+Black|Elsie+Swash+Caps|Playfair+Display|Anton|Rubik|Teko:600|Sacramento|Abril+Fatface|Cormorant+Garamond|Neucha|Unica+One|Old+Standard+TT" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/decolines.css" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/lettereffect.css" />
<link rel="stylesheet" type="text/css" href="css/pater.css" />
<!--[if IE]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<script>document.documentElement.className = 'js';</script>
</head>
<body class="loading">
<svg class="hidden">
<defs>
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
</symbol>
<symbol id="icon-cross" viewBox="0 0 24 24">
<title>cross</title>
<path d="M2.9,2.9l18.2,18.2 M2.9,21.1L21.1,2.9 M21.8,20.4L13.4,12l8.4-8.4l-1.4-1.4L12,10.6L3.6,2.2L2.2,3.6l8.4,8.4l-8.4,8.4l1.4,1.4l8.4-8.4l8.4,8.4L21.8,20.4z"/>
</symbol>
</defs>
</svg>
<main>
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="http://www.jb51.net/" title="返回下载页"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
<a class="codrops-icon codrops-icon--drop" href="http://www.jb51.net/" title="脚本之家"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<h1 class="codrops-header__title">Letter Effects <span>with <a href="http://anime-js.com/">anime.js</a></span></h1>
</header>
<section class="content content--c1" id="section1">
<a href="#section1" class="section-link">#1</a>
<div class="slideshow slideshow--1" data-effect="fx1">
<div class="slide slide--current"><h2 class="title title--style-1">Forever</h2></div>
<div class="slide"><h2 class="title title--style-1">Glorious</h2></div>
<div class="slide"><h2 class="title title--style-1">Timeless</h2></div>
<div class="slide"><h2 class="title title--style-1">Love</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger btn--prev">Previous</button>
<button class="btn btn--trigger btn--next">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c2" id="section2">
<a href="#section2" class="section-link">#2</a>
<div class="slideshow slideshow--2" data-effect="fx3">
<div class="slide slide--current"><h2 class="title title--style-2 title--centered">Monday</h2></div>
<div class="slide"><h2 class="title title--style-2 title--centered">Tuesday</h2></div>
<div class="slide"><h2 class="title title--style-2 title--centered">Wednesday</h2></div>
<div class="slide"><h2 class="title title--style-2 title--centered">Thursday</h2></div>
<div class="slide"><h2 class="title title--style-2 title--centered">Friday</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger btn--prev">Previous</button>
<button class="btn btn--trigger btn--next">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c3" id="section3">
<a href="#section3" class="section-link">#3</a>
<div class="slideshow slideshow--3" data-effect="fx2">
<div class="slide slide--current"><h2 class="title title--style-3 title--centered">Freedom</h2></div>
<div class="slide"><h2 class="title title--style-3 title--centered">Equality</h2></div>
<div class="slide"><h2 class="title title--style-3 title--centered">Justice</h2></div>
<div class="slide"><h2 class="title title--style-3 title--centered">Knowledge</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger btn--prev">Previous</button>
<button class="btn btn--trigger btn--next">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c4" id="section4">
<a href="#section4" class="section-link">#4</a>
<div class="slideshow slideshow--4" data-effect="fx4">
<div class="slide slide--current"><h2 class="title title--style-4 title--right">Psycho</h2></div>
<div class="slide"><h2 class="title title--style-4 title--right">Uprising</h2></div>
<div class="slide"><h2 class="title title--style-4 title--right">Revolt</h2></div>
<div class="slide"><h2 class="title title--style-4 title--right">Resistance</h2></div>
<div class="slide"><h2 class="title title--style-4 title--right">Aftermath</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger btn--prev">Previous</button>
<button class="btn btn--trigger btn--next">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c5" id="section5">
<a href="#section5" class="section-link">#5</a>
<div class="slideshow slideshow--5" data-effect="fx5">
<div class="slide slide--current"><h2 class="title title--style-5">Crocodile</h2></div>
<div class="slide"><h2 class="title title--style-5">Koala</h2></div>
<div class="slide"><h2 class="title title--style-5">Cassowary</h2></div>
<div class="slide"><h2 class="title title--style-5">Echidna</h2></div>
<div class="slide"><h2 class="title title--style-5">Kangaroo</h2></div>
<div class="slide"><h2 class="title title--style-5">Dugong</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger btn--prev">Previous</button>
<button class="btn btn--trigger btn--next">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c6" id="section6">
<a href="#section6" class="section-link">#6</a>
<div class="slideshow slideshow--6" data-effect="fx6">
<div class="slide slide--current"><h2 class="title title--style-6">Samoa</h2></div>
<div class="slide"><h2 class="title title--style-6">Hossegor</h2></div>
<div class="slide"><h2 class="title title--style-6">Bali</h2></div>
<div class="slide"><h2 class="title title--style-6">Tofino</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger">Previous</button>
<button class="btn btn--trigger">Next</button>
</nav>
</section><!-- /content -->
<section class="content content--c7" id="section7">
<a href="#section7" class="section-link">#7</a>
<div class="slideshow slideshow--7" data-effect="fx7">
<div class="slide slide--current"><h2 class="title title--style-7">Birth Place: Earth</h2></div>
<div class="slide"><h2 class="title title--style-7">Race: Human</h2></div>
<div class="slide"><h2 class="title title--style-7">Politics: Freedom</h2></div>
<div class="slide"><h2 class="title title--style-7">Religion: Love</h2></div>
</div>
<nav class="actions">
<button class="btn btn--trigger btn--prev">Prev
18种基于anime.js的文字动画特效源码.zip （28个子文件） 
132686876557589501 Html_anime.js css 
decolines.css 237B pater.css 2KB demo.css 13KB lettereffect.css 301B normalize.css 2KB img 
11.png 78KB related AnimatedLetters.png 5KB
LinkStyles.jpg 16KB 2.jpg 53KB 1.jpg 103KB 6.jpg 51KB
mouse.svg 450B 3.jpg 125KB 5.jpg 52KB 4.jpg 45KB 10.jpg 86KB 13.jpg 124KB sponsor hired.png 799B 12.jpg 36KB 9.jpg 73KB 7.jpg 89KB 8.png 66KB
index.html 30KB js lineMaker.js 9KB anime.min.js 9KB textfx.js 12KB charming.min.js 527B imagesloaded.pkgd.min.js 5KB资源评论
