基于css3 clip-path创建文字元素内区域显示,区外隐藏。svg填充火焰动画背景,来制作逼真的火焰文字燃烧动画特效。ps:选一款不错的背景填充很重要!
使用方法:
1、head引入css文件
<link rel="stylesheet" href="css/style.css">
2、body引入部分
<div class="contents">
<div class="svg-wrapper">
<svg class="svg" width="400" height="200" viewBox="0, 0, 400, 200">
<clipPath id="svg-clippath">
<text class="svg__text" x="8" y="51">SVG 绘制</text>
<text class="svg__text" x="8" y="128">火焰 文字</text>
</clipPath>
<image class="js-svg-image" x="0" y="0" width="800" height="200" clip-path="url(#svg-clippath)" xlink:href="img/tex_20190618.png"></image>
</svg>
</div>
</div>
<script src="js/script.js"></script>