svg+css实现炫酷x字母描边显示动画效果代码-html代码-BFW代码库

svg+css实现炫酷x字母描边显示动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现炫酷x字母描边显示动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<style>
    html { height: 100%; }
        body { margin: 0; padding: 0; background: black; position: relative; width: 100%; height: 100%; overflow: hidden; }

        #genx { width: 80%; max-width: 300px; position: absolute; top: 50%; left: 50%; z-index: 2; transform: translateX(-50%) translateY(-50%); }
        
  #x_topmask_path { stroke-dasharray: 1646.987548828125; stroke-dashoffset: 1646.987548828125; }
        #x_bottommask_path { stroke-dasharray: 1605.275634765625; stroke-dashoffset: 1605.275634765625; }
        #x_top_shade { opacity: 0; transition: opacity 500ms 450ms; }
        #x_bottom_shade { opacity: 0; transition: opacity 500ms 900ms; }

        .animate-in #x_topmask_path { animation: x-animate-in 600ms cubic-bezier(0, 0, 0.65, 1) forwards; }
        .animate-in #x_bottommask_path { animation: x-animate-in 1000ms 400ms cubic-bezier(0, 0, 0.65, 1) forwards; }
        .animate-in #x_top_shade, .animate-in #x_bottom_shade { opacity: 1; }

        @keyframes x-animate-in { 100% { stroke-dashoffset: 0; }}
</style>
    </head>
    <body>

        <svg id="genx" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 786.34 638">
            <g mask="url(#x_topmask)">
                <path id="x_original_top" data-name="x original top" d="M409.53,346.46l209.89-205.1c12.14-11.87-4.39-30.65-17.7-20.11L406.19,276a13.42.........完整代码请登录后点击上方下载按钮下载查看