js+css实现可编辑文本文字分割描边动画效果代码-html代码-BFW代码库

js+css实现可编辑文本文字分割描边动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现可编辑文本文字分割描边动画效果代码

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

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

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

  
  
<style>
* {
	font-family: system-ui;
}
text {
	font-size: 30px;
	font-weight: 900;
	text-anchor: middle;
	dominant-baseline: middle;
}

.controls {
	margin: 0 auto;
	width: min-content;
}

label {
	display: block;
	margin-block-end: 1em;
	font-size: 1.4em;
}

input {
	font-size: 1em;
	padding: .5em;
	border: .2em solid;
	border-radius: .5em;
	text-align: center;
	margin-block-start: .2em;
}

#info {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 200px;
	text-align: left;
}
</style>


  
  
</head>

<body translate="no">
  <svg viewBox="0 0 400 100">
	  <defs>
<!-- 			Based on: https://stackoverflow.com/questions/13069446/simple-fill-pattern-in-svg-diagonal-hatching -->
			<pattern id="diagonalHatch" patternUnits="userSpaceOnUse">
</pattern>

  </defs>

		<mask id="myMask">
			<rect width=100% height=100% fill="url(#diagonalHatch)" />
		</mask>

	<filter id="outline">    
		<!-- 	FROM https://tympanus.net/codrops/2019/01/22/svg-filter-effects-outline-text-with-femorphology/ -->
		<feMorphology operator="dilate" in="SourceAlpha" result="THICKNESS" />
		<feComposite operator="out" in="THICKNESS" in2="SourceGraphic" result="MAIN_EFFECT">
		</feComposite>
		
		<feFlood flood-color="#F00" flood-opacity="1" result="PINK"></feFlood>
    <feComposite in="PINK" in2="MAIN_EFFECT" operator="in" result="OUTLINE"></feComposite>
		
	</filter>
	
	<g filter="url(#outline)" >
		<g mask="url(#myMask)" >
			<text x=50% y=50% dominant-baseline="middle" text-anchor="middle" style="font-size: 60px;"></text>
		</g>
	</g>
</svg>

<div class="controls">
	<label>
		Edit Text
		<input placeholder="Type here to change text" id=text />
	</.........完整代码请登录后点击上方下载按钮下载查看