css3 svg火焰文字制作动画

css3 svg火焰文字制作动画

收藏
css3 svg火焰文字制作动画
基于css3 clip-path创建文字元素内区域显示,区外隐藏。svg填充火焰动画背景,来制作逼真的火焰文字燃烧动画特效。ps:选一款不错的背景填充很重要!
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 小喵喵
  • 上传时间 6年前

使用方法:

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>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。