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,13.42,0,0,1-17.87-1.09L214,98.48a13.42,13.42,0,0,0-9.54-4H31.91a13.42,13.42,0,0,0-9.55,22.84L287.64,385.87a13.42,13.42,0,0,1,1.74,16.69l-42,65.32c-8.64,13.44,9.23,28,20.66,16.85l84.72-82.79a13.42,13.42,0,0,0,.17-19l-3.74-3.78h0L338.67,368.5l-16.58-16.79h0L138.5,165.85A13.42,13.42,0,0,1,148,143H184.2a13.42,13.42,0,0,1,9.54,4L358.49,313.78h0l32.11,32.51A13.42,13.42,0,0,0,409.53,346.46Z" transform="translate(-5 -73)" style="fill: white"/>
                <path id="x_top_shade" data-name="x original top shade" d="M22.37,117.32L287.64,385.87a13.42,13.42,0,0,1,1.74,16.69l-42,65.32a12.9,12.9,0,0,0,2.11,17h0L317.2,408c7.47-8.47,6.68-20.82-1.31-28.81L31.91,94.48A13.42,13.42,0,0,0,22.37,117..........完整代码请登录后点击上方下载按钮下载查看