文字分割动画特效

代码语言:html

所属分类:动画

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

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

<title>Variable font animation</title>
<link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/splitting.css" />
<script src="http://repo.bfw.wiki/bfwrepo/js/splitting.min.js"></script>
<style>
      /* 
	Weight axis: 100 – 700
	Width axis: 85 – 100
*/
@font-face {
	font-family: "IBM Plex Sans Roman";
	src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
}

* {
	box-sizing: border-box;
}

body {
	font-family: "IBM Plex Sans Roman", Times;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 100vh;
	background-color: #DCEDC8;
}

h1 {
	font-weight: 1.........完整代码请登录后点击上方下载按钮下载查看

网友评论0