<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>HTML5 SVG炫酷文字爆炸特效</title>
<style>
.svg-container {
display: inline-block; position: relative;
width: 100%; padding-bottom: 38%;
vertical-align: middle; overflow: hidden;
background: #000;
}
body { background: #000; }
.footer{width: 100%;height: auto; color: #fff;}
.center{text-align: center;}
a{color: #fff;}
svg#heavy path {
fill: white; stroke: white;
transition: 12s 1.6s cubic-bezier(0, 1, 0, 1);
}
svg#heavy {
display: inline-block;
position: absolute; top: 0; left: 0;
}
@keyframes shake {
0% { transform: translate(3px,5px); }
5% { transform: translate(8px,-5px); }
10% { transform: translate(-3px,2px); }
20% { transform: translate(0px,-5px); }
25% { transform: translate(2px,-5px); }
30% { transform: translate(-3px,-3px); }
30% { transform: translate(0px,0px); }
40% { transform: translate(2px,2px); }
55% { transform: translate(6px,-5px); }
68% { transform: translate(4px,-3px); }
80% { transform: translate(-4px,2px); }
85% { transform: translate(2px,-5px); }
90% { transform: translate(-8px,5px); }
100% { transform: translate(7px,6px); }
}
figure.svg-container { margin: 0; }
figure.svg-container figcaption { position: absolute; bottom: 0; background: #fff; width: 100%; }
figure.svg-container:hover svg { animation: shake 1s linear; }
</style>
<script>
window.console = window.console || function(t) {};
window.open = function(){ console.log('window.open is disabled.'); };
window.print = function(){ console.log('window.print is disabled.'); };
// Support hover state for mobile.
if (false) {
window.ontouchstart = function(){};
}
</script>
<script src="js/prefixfree.min.js">"></script>
</head>
<body>
<figure class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475.7 162.3" id="heavy" preserveAspectRatio="xMinYMin meet">
<g>
<path d="M72,134.1v0.9h30.5v-8.8C92,127.2,81.9,130.4,72,134.1z"/>
<path d="M102.6,113c-10.1,1.5-20.3,2.2-30.5,2.7v18.4c9.9-3.7,20-6.9,30.5-7.8V113z"/>
<path d="M57.5,116.3c-10.2,0.4-20.4,1-30.5,2.1V135h30.5V116.3z"/>
<path d="M57.5,36.9C47.2,33.6,37,30,26.9,26.2v36.5c10.2-1.3,20.4-2.1,30.5-2.7V36.9z"/>
<path d="M102.6,78.7V50.7c-10.2-2.9-20.4-5.9-30.5-9v19.6c7.2,6.5,15.1,11.9,23.5,16.6C97.9,78.1,100.2,78.4,102.6,78.7z"/>
<path d="M72,61.2v1.2H57.5V60c-10.2,0.5-20.4,1.4-30.5,2.7v7c23.1,2.6,45.9,5.2,68.6,8.2C87.1,73.1,79.2,67.7,72,61.2z"/>
<path d="M102.6,95.6c-10.2,1.1-20.4,2.1-30.5,3.1v16.9c10.2-0.5,20.5-1.2,30.5-2.7V95.6z"/>
<path d="M102.6,78.7c-2.3-0.3-4.7-0.6-7-0.9c2.3,1.3,4.7,2.5,7,3.7V78.7z"/>
<path d="M95.5,77.8c-22.7-3-45.5-5.6-68.6-8.2v14.1c9.6,4.1,20.3,5.8,30.5,7.9v-2.2H72V91c10.5-3.3,21-4.3,30.5-9.1v-0.4
C100.2,80.3,97.8,79.1,95.5,77.8z"/>
<path d="M72,98.8c10.2-1,20.3-2,30.5-3.1V81.9C93,86.7,82.6,87.7,72,91V98.8z"/>
<path d="M26.9,103.3c10.2-1.1,20.4-2.1,30.5-3.1v-8.5c-10.2-2.1-20.9-3.9-30.5-7.9V103.3z"/>
<path d="M57.5,100.2c-10.2,1-20.4,2-30.5,3.1v15.1c10.1-1.2,20.3-1.7,30.5-2.1V100.2z"/>
<path d="M57.5,21.9H26.9v4.3C37,30,47.2,33.6,57.5,36.9V21.9z"/>
<path d="M102.6,21.9H72v19.7c10.1,3.2,20.3,6.2,30.5,9V21.9z"/>
<path d="M175.2,21.9h-13.1c4.3,4,8.6,7.9,13.1,11.7V21.9z"/>
<path d="M162.1,21.9h-43.7v3.3c17.1,8,34.2,16.3,51.8,23.8h5V33.6C170.7,29.8,166.3,25.9,162.1,21.9z"/>
<path d="M118.4,55c10.2,2.8,20.3,5.5,30.5,8.1V49h21.2c-17.5-7.6-34.7-15.8-51.8-23.8V55z"/>
<path d="M172.4,86.1V69.3c-7.5-1.9-15-3.9-22.5-5.8h-1v-0.3c-10.2-2.7-20.4-5.4-30.5-8.1v25.9c14.4,2.1,28.8,4.3,43.3,6.8
c1.4-0.2,2.9-0.5,4.3-0.7C168.1,86.7,170.3,86.4,172.4,86.1z"/>
<path d="M172.4,86.1c-2.1,0.3-4.3,0.5-6.4,0.9c-1.4,0.2-2.9,0.5-4.3,0.7c3.6,0.6,7.2,1.2,10.7,1.9V86.1z"/>
<path d="M118.4,80.9v12.9c14.4-1.7,28.8-3.7,43.3-6.1C147.2,85.2,132.8,83,118.4,80.9z"/>
<path d="M148.9,90.5h23.5v-0.9c-3.6-0.7-7.2-1.3-10.7-1.9c-14.5,2.4-28.9,4.4-43.3,6.1v16.1c5.3-1.3,10.5-2.9,15.6-4.9
c4.9-1.9,9.9-3.6,14.9-5.1V90.5z"/>
<path d="M148.9,107.9v-8c-5,1.5-10,3.2-14.9,5.1c-5.1,2-10.4,3.6-15.6,4.9V129c1.2-0.7,2.4-1.3,3.6-2c13.5-6.7,27.1-13.5,41.2-19.1
H148.9z"/>
<path d="M175.2,135v-27.1h-4.6c-7.1,8.4-13,17.6-18.4,27.1H175.2z"/>
<path d="M122,127c-1.2,0.7-2.4,1.3-3.6,2v6h33.7c5.5-9.5,11.4-18.7,18.4-27.1h-7.3C149.1,113.5,135.5,120.3,122,127z"/>
<path d="M172.4,63.4H150c7.5,2,15,3.9,22.5,5.8V63.4z"/>
<path d="M221.8,82.4C221.8,82.4,221.8,82.4,221.8,82.4C221.8,82.4,221.8,82.4,221.8,82.4L221.8,82.4z"/>
<path d="M222.3,79.5c-7.1-15.6-10.9-32.4-16.2-48.5l-10.7,44.4c8.8,2.3,17.5,4.7,26.3,7.1c0,0,0,0,0,0L222.3,79.5z"/>
<path d="M208.3,21.9l-2.2,9c5.3,16.2,9.1,32.9,16.2,48.5l0.1-0.4l2.1-13.7c0-0.2,0.1-1,0.3-2.1s0.4-3.3,0.7-6.3
c0.2-1.5,0.4-2.9,0.5-4.2c0.2-1.3,0.3-2.4,0.4-3.4l0.4,4.4c0.8-10.6,1.5-21.3,1.9-31.9H208.3z"/>
<path d="M245.7,21.9h-16.9c-0.4,10.6-1.1,21.3-1.9,31.9l0.6,6.3c0.2,2.2,0.4,4,0.6,5.5c0.1,1.4,0.3,2.6,0.4,3.4
c0.3,2.2,0.5,4.1,0.7,5.8c5.2-15,11.8-29.3,18.6-43.4L245.7,21.9z"/>
<path d="M230.2,83.7l0.4,2.7c0.9-0.3,1.8-0.6,2.7-0.9c7.5-5.1,15-10.3,22.4-15.6l-8.1-38.4c-6.8,14.1-13.3,28.4-18.6,43.4
c0.5,3.9,0.8,6.2,0.8,7C230.1,82.9,230.2,83.6,230.2,83.7z"/>
<path d="M255.8,69.8c-7.4,5.3-14.9,10.5-22.4,15.6c8-2.8,16-5.5,24-8.2L255.8,69.8z"/>
<path d="M231.8,96.8c11.2,5.6,22.3,11.3,33.4,17.1l-3.7-17.5c-10-1.9-19.8-3.7-30.2-5.6l0.9,6.1H231.8z"/>
<path d="M261.5,96.4l-1.7-8.2c-9.6-0.1-19.2-0.1-28.8-0.2l0.4,2.8C241.7,92.6,251.4,94.5,261.5,96.4z"/>
<path d="M259.7,88.2l-2.3-11c-8,2.7-16,5.4-24,8.2c-0.9,0.6-1.7,1.2-2.6,1.8l0.1,0.9C240.5,88,250.1,88.1,259.7,88.2z"/>
<path d="M233.4,85.4c-0.9,0.3-1.8,0.6-2.7,0.9l0.1,0.8C231.6,86.6,232.5,86,233.4,85.4z"/>
<path d="M195.5,75.3l-2.2,9c9.5-0.6,19-1.1,28.4-1.9C213,80,204.3,77.6,195.5,75.3z"/>
<path d="M220.5,89.9l1.3-7.5c0,0,0,0,0,0c-9.5,0.8-19,1.3-28.4,1.9l-1.7,6.9C201.2,90.2,210.8,89.8,220.5,89.9z"/>
<path d="M218,91c-0.7,1.2-1.3,2.3-2,3.5c1.3-0.1,2.5-0.2,3.8-0.3l0.7-4.3c-9.7-0.2-19.3,0.2-28.8,1.3l-1.9,7.8
c8.5-2.2,17.2-3.8,26.2-4.6C216.7,93.3,217.3,92.2,218,91z"/>
<path d="M265.2,113.9c-11.1-5.7-22.2-11.5-33.4-17.1h-0.2c3.4,8.7,6.6,17.5,10.2,26c9.3,2.5,18.3,5.9,27.3,9.3L265.2,113.9z"/>
<path d="M241.7,122.8c1.8,4.1,3.6,8.2,5.6,12.2h22.3l-0.6-2.9C260.1,128.7,251.1,125.3,241.7,122.8z"/>
<path d="M231.5,96.8h-10.5c-4.8,12.1-7.5,25.1-9.4,38.2h1l2.5-14.4h20.6l0.1,0.8c2,0.4,3.9,0.9,5.8,1.4
C238.1,114.3,234.9,105.6,231.5,96.8z"/>
<path d="M235.9,121.4l2.1,13.6h9.3c-2-4-3.8-8.1-5.6-12.2C239.8,122.3,237.9,121.8,235.9,121.4z"/>
<path d="M219.3,96.8l0.5-2.7c-1.3,0.1-2.5,0.2-3.8,0.3c-8.2,13.9-17.5,27.2-26.8,40.5h22.5c1.9-13.1,4.6-26.1,9.4-38.2H219.3z"/>
<path d="M189.8,99l-8.6,36h8c9.3-13.3,18.6-26.7,26.8-40.5C207,95.2,198.3,96.8,189.8,99z"/>
<path d="M358.5,21.9h-33.2l-4.2,21.7c12.2-5.6,24.1-11.9,36.3-17.7L358.5,21.9z"/>
<path d="M321.1,43.6l-2.9,15.2c10.8-2.9,21.6-5.7,32.5-8.2l6.7-24.7C345.2,31.7,333.3,38,321.1,43.6z"/>
<path d="M270.6,21.9l3.9,17.1c8.4-5.6,16.9-11.3,25.4-17.1H270.6z"/>
<path d="M299.9,21.9c-8.5,5.7-17,11.5-25.4,17.1l3.4,14.7c7-5.2,14-10.4,21.1-15.7c1.9-1.5,3.8-2.9,5.7-4.2l-2-11.9H299.9z"/>
<path d="M304.7,33.8c-1.9,1.3-3.8,2.8-5.7,4.2c-7.1,5.3-14.1,10.6-21.1,15.7l3.6,15.7c9.3-2.9,18.5-5.6,27.9-8.3
c-0.4-2.4-0.7-4.7-1.1-7L304.7,33.8z"/>
<path d="M335.3,106.8c-15.4-1.8-30.9-3.8-46.6-6l3.1,13.7c12.7,4.4,25,9.8,37.1,15.8L335.3,106.8z"/>
<path d="M291.8,114.6l3.4,14.9c3.6,1.9,7.3,3.7,10.9,5.5h21.5l1.3-4.6C316.8,124.4,304.5,118.9,291.8,114.6z"/>
<path d="M311.8,80c-0.7-6.6-1.5-12.8-2.4-18.8c-9.3,2.6-18.6,5.4-27.9,8.3l2.7,11.8C293.5,81.3,302.6,80.8,311.8,80z"/>
<path d="M284.2,81.2l1.7,7.2c9,0.1,17.9,0.3,26.8,0.4c-0.3-3-0.6-6-0.9-8.9C302.6,80.8,293.5,81.3,284.2,81.2z"/>
<path d="M350.7,50.6c-10.9,2.5-21.7,5.2-32.5,8.2l-0.1,0.6c-1.1,5.6-2,11.4-2.8,17.3c-0.1,1-0.3,2-0.4,3c9.8-1,19.4-2.6,29.1-4.4
L350.7,50.6z"/>
<path d="M314.9,79.7c-0.4,3-0.7,6.1-1,9.2c8.7,0.1,17.5,0.3,26.2,0.4l3.8-14.1C334.3,77.1,324.6,78.6,314.9,
HTML5 SVG炫酷文字爆炸特效模板源码
版权申诉
17 浏览量
2024-03-27
17:03:15
上传
评论
收藏 126KB ZIP 举报
HTML5 SVG炫酷文字爆炸特效模板源码.zip （6个子文件） 
HTML5 SVG炫酷文字爆炸特效模板源码 js 
stopExecutionOnTimeout.js 2KB prefixfree.min.js 6KB jquery.js 95KB
最全HTML5源码模板地址.png 83KB
index.html 11KB 优质源码合集.html 6KB资源评论
