svg+css布局实现文字分割切割效果代码-html代码-BFW代码库

svg+css布局实现文字分割切割效果代码

代码语言：html

代码描述：svg+css布局实现文字分割切割效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body,
html {
	display: grid;
	place-items: center;
	height: 100%;
}

body {
	background: #5523e7;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}
h1 {
	--top: 42%;
	--bottom: 55%;
	font-size: 7rem;
	white-space: nowrap;
	background: linear-gradient(
			-0.5deg,
			transparent var(--top),
			red calc(var(--top) + 1px)
		),
		linear-gradient(
			180deg,
			transparent var(--bottom),
			blue calc(var(--bottom) + 0.2em)
		);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;

	filter: url(#split);

	&:before {
		content: "";
		background.........完整代码请登录后点击上方下载按钮下载查看