<!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>炫酷HTML5 SVG文字变形动画特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" type="text/css" href="css/sponsor.css" />
<link rel="stylesheet" type="text/css" href="css/component.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>
<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-octicon" viewBox="0 0 24 24">
<title>octicon</title>
<path d="M12,2.2C6.4,2.2,1.9,6.7,1.9,12.2c0,4.4,2.9,8.2,6.9,9.6c0.5,0.1,0.7-0.2,0.7-0.5c0-0.2,0-0.9,0-1.7c-2.8,0.6-3.4-1.4-3.4-1.4C5.6,17.1,5,16.8,5,16.8C4.1,16.2,5,16.2,5,16.2c1,0.1,1.5,1,1.5,1c0.9,1.5,2.4,1.1,2.9,0.8c0.1-0.7,0.4-1.1,0.6-1.3c-2.2-0.3-4.6-1.1-4.6-5c0-1.1,0.4-2,1-2.7C6.5,8.8,6.2,7.7,6.7,6.4c0,0,0.8-0.3,2.8,1C10.3,7.2,11.1,7.1,12,7c0.9,0,1.7,0.1,2.5,0.3c1.9-1.3,2.8-1,2.8-1c0.5,1.4,0.2,2.4,0.1,2.7c0.6,0.7,1,1.6,1,2.7c0,3.9-2.4,4.7-4.6,5c0.4,0.3,0.7,0.9,0.7,1.9c0,1.3,0,2.4,0,2.8c0,0.3,0.2,0.6,0.7,0.5c4-1.3,6.9-5.1,6.9-9.6C22.1,6.7,17.6,2.2,12,2.2z" />
</symbol>
</defs>
</svg>
<main>
<header class="htmleaf-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/html5/" title="返回下载页"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<h1 class="htmleaf-header__title">炫酷HTML5 SVG文字变形动画特效</h1>
<p class="htmleaf-header__tagline">A fun letter animation inspired by Jake Bartlett's Dribbble shot"Shading Letters in Illustrator" for Jamie Bartlett's Skillshare class. </p>
</header>
<div class="content content--1">
<svg width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-1">
<!--W-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer color-6" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
<path class="letter__layer color-1" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
<path class="letter__layer color-2" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
</g>
</g>
<!--I-->
<g class="letter letter--2">
<g class="letter__part">
<path class="letter__layer color-6" d="M100,20.3l8.4,58.4" />
<path class="letter__layer color-2" d="M100,20.3l8.4,58.4" />
<path class="letter__layer color-3" d="M100,20.3l8.4,58.4" />
</g>
</g>
<!--L-->
<g class="letter letter--3">
<g class="letter__part">
<path class="letter__layer color-6" d="M126.4,70.8l27.6,0.5" />
<path class="letter__layer color-3" d="M126.4,70.8l27.6,0.5" />
<path class="letter__layer color-4" d="M126.4,70.8l27.6,0.5" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M128.9,15.6l-2.3,60.2" />
<path class="letter__layer color-3" d="M128.9,15.6l-2.3,60.2" />
<path class="letter__layer color-4" d="M128.9,15.6l-2.3,60.2" />
</g>
</g>
<!--D-->
<g class="letter letter--4">
<g class="letter__part">
<path class="letter__layer color-6" d="M167.4,27.6l3.7,49.1" />
<path class="letter__layer color-4" d="M167.4,27.6l3.7,49.1" />
<path class="letter__layer color-5" d="M167.4,27.6l3.7,49.1" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M157.8,30.9c0,0,31.2-10.9,40.3,6.8c8.9,17-23.5,38.4-35,42.6" />
<path class="letter__layer color-4" d="M157.8,30.9c0,0,31.2-10.9,40.3,6.8c8.9,17-23.5,38.4-35,42.6" />
<path class="letter__layer color-5" d="M157.8,30.9c0,0,31.2-10.9,40.3,6.8c8.9,17-23.5,38.4-35,42.6" />
</g>
</g>
<!--E-->
<g class="letter letter--5">
<g class="letter__part">
<path class="letter__layer color-6" d="M215,52l25.6,2.8" />
<path class="letter__layer color-5" d="M215,52l25.6,2.8" />
<path class="letter__layer color-1" d="M215,52l25.6,2.8" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M211.8,76.9l30.6,3.4" />
<path class="letter__layer color-5" d="M211.8,76.9l30.6,3.4" />
<path class="letter__layer color-1" d="M211.8,76.9l30.6,3.4" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M218.6,27.4l30.9,2.9" />
<path class="letter__layer color-5" d="M218.6,27.4l30.9,2.9" />
<path class="letter__layer color-1" d="M218.6,27.4l30.9,2.9" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M218.4,22.4l-6.9,59.6" />
<path class="letter__layer color-5" d="M218.4,22.4l-6.9,59.6" />
<path class="letter__layer color-1" d="M218.4,22.4l-6.9,59.6" />
</g>
</g>
<!--R-->
<g class="letter letter--6">
<g class="letter__part">
<path class="letter__layer color-6" d="M264.2,29.8l24.1,8c12,4.2,12,11,9.4,18.5c-2.6,7.5-6.7,12.9-18.7,8.8l-14.2-4.8" />
<path class="letter__layer color-4" d="M264.2,29.8l24.1,8c12,4.2,12,11,9.4,18.5c-2.6,7.5-6.7,12.9-18.7,8.8l-14.2-4.8" />
<path class="letter__layer color-2" d="M264.2,29.8l24.1,8c12,4.2,12,11,9.4,18.5c-2.6,7.5-6.7,12.9-18.7,8.8l-14.2-4.8" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M284.9,96.2l-20.4-35.1" />
<path class="letter__layer color-4" d="M284.9,96.2l-20.4-35.1" />
<path class="letter__layer color-2" d="M284.9,96.2l-20.4-35.1" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M275.2,29.4l-20.5,60.6" />
<path class="letter__layer color-4" d="M275.2,29.4l-20.5,60.6" />
<path class="letter__layer color-2" d="M275.2,29.4l-20.5,60.6" />
</g>
</g>
<!--M-->
<g class="letter letter--7">
<g class="letter__part">
<path class="letter__layer color-6" d="M72.9,156.9l-7.1-56.5L91.7,127l18.8-29.8l7.1,56.5" />
<path class="letter__layer color-3" d="M72.9,156.9l-7.1-56.5L91.7,127l18.8-29.8l7.1,56.5" />
<path class="letter__layer color-1" d="M72.9,156.9l-7.1-56.5L91.7,127l18.8-29.8l7.1,56.5" />
</g>
</g>
<!--I-->
<g class="letter letter--8">
<g class="letter__part">
<path class="letter__layer color-6" d="M144.9,99.5l-6,61.3" />
<path class="letter__layer color-4" d="M144.9,99.5l-6,61.3" />
<path class="letter__layer color-2" d="M144.9,99.5l-6,61.3" />
</g>
</g>
<!--N-->
<g class="letter letter--9">
<g class="letter__part">
<path class="letter__layer color-6" d="M170.4,161.9l-3.2-61.8l43.4,58.1l-7.2-62.6" />
<path class="letter__layer color-1" d="M170.4,161.9l-3.2-61.8l43.4,58.1l-7.2-62.6"
炫酷HTML5 SVG文字变形动画特效源码.zip
版权申诉
46 浏览量
2022-11-10
07:52:09
上传
评论
收藏 151KB ZIP 举报
炫酷HTML5 SVG文字变形动画特效源码.zip （12个子文件） 
132686867682301937 HTML5_SVGwenzi css 
htmleaf-demo.css 8KB sponsor.css 2KB normalize.css 2KB component.css 2KB img sponsor 
MightyDeals_FontDeals.png 130KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 29KB js anime.min.js 9KB main.js 6KB资源评论
毕业_设计
- 粉丝: 1921
- 资源: 1万+
