CSS3折纸样式文本标题特效

1、新建html文档。

3、书写hmtl代码。<div class="container"><h1 class="row skew-title"> <span>S</span><span>K</span><span>E</span><span>W</span><span>E</span><span class="last">D</span> <span>T</span><span>E</span><span>X</span><span class="last">T</span> <span class="alt">C</span><span class="alt">S</span><span class="alt">S</span><span class="alt last">3</span> </h1><p class="row row--intro">用CSS3属性和JS悬停制作页面标题的特效</p></div><div class="container"><img src="1.png"/></div>

5、书写并添加js代码。<script src="js/jquery.min.js"></script>这个是个js包其他网上可以下载<script>(function() { $('.skew-title').children('span').hover((function() { var $el, n; $el = $(this); n = $el.index() + 1; $el.addClass('flat'); if (n % 2 === 0) { return $el.prev().addClass('flat'); } else { if (!$el.hasClass('last')) { return $el.next().addClass('flat'); } } }), function() { return $('.flat').removeClass('flat'); });}).call(this);</script>

7、查看效果。