split文字路径动画

代码语言:html

所属分类:动画

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url('https://fonts.googleapis.com/css?family=Nova+Mono&display=swap');

* {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	background-color: #18181c;
	display: flex;
	align-items: center;
	justify-content: center;
}

h1 {
	font-family: 'Nova Mono', monospace;
	font-size: 2.5rem;
	text-transform: uppercase;
	width: 1109px;
	height: 365px;
	color: turquoise;
}

.char {
	offset-path: path('M.2 219.6c247-107 233.3 91.4 406.4 138.4C659.2 426.6 750.2 6.6 552.2.6 337.7-5.9 426.9 415 696.1 359.4c256.1-52.9 182.1-217.9 413.1-163.9');
	offset.........完整代码请登录后点击上方下载按钮下载查看

网友评论0