Fork me on GitHub

用原生CSS编写动态字体

HTML部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态字体</title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
	</head>
	<body>
		<h1>Best Look</h1>
		<h2>Yeah 666!</h2>
	</body>
</html>

CSS部分：

:root {
	font-size: 32px;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	flex-direction: column;
	background-color: #33ff00;
	font-family: "arial, helvetica, sans-serif";
	perspective: 2500px;
}

h1, h2 {
	position: relative;
	padding: 0;
	margin: 0;
	color: #fff;
}

h1 {
	font-size: 6rem;
	animation: 5s bast ease-in-out infinite;
}

@keyframes bast{
	0%, 100% {
		transform: rotate3d(0, 1, 0, -20deg);
	}
	50% {
		transform: rotate3d(0, 1, 0, 20deg);
	}
}

h2 {
	font-size: 3rem;
	letter-spacing: -4px;
	animation: 2.5s ye ease-in-out infinite;
}

@keyframes ye {
	0% 100% {
		transform: translate3d(1, 0, 0, -10deg);
	}
	50% {
		transform: rotate3d(1, 0, 0, 10deg);
	}
}

h1::before,
h1::after {
	content: 'Best Look';
}

h2::before,
h2::after {
	content: 'Yeah 666!';
}

h1::before,
h1::after,
h2::before,
h2::after {
	position: absolute;
	top: 0;
	left: 0;
}

h1::before {
	color: #9900ff;
	z-index: -3;
	animation: 5s h1-before ease-in-out infinite;
}

@keyframes h1-before {
	0%, 100% {
		transform: translate3d(15px, 5px, -10px);
	}
	50% {
		transform: translate3d(-15px, 5px, -10px);
	}
}

h1::after {
	color: #330033;
	z-index: -4;
	animation: 5s h1-after ease-in-out infinite;
}

@keyframes h1-after {
    0%, 100% {
		transform: translate3d(30px, 10px, -20px);
	}
	50% {
		transform: translate3d(-30px, 10px, -20px);
	}
}

h2::before {
	color: #00ccff;
	z-index: -1;
	animation: 2.5s h2-before ease-in-out infinite;
}

@keyframes h2-before {
	0%, 100% {
		transform: translate3d(0px, 6px, -10px);
	}
	50% {
		transform: translate3d(0px, -3px, -10px);
	}
}

h2::after {
	color: #000ccc;
	z-index: -2;
	animation: 2.5s h2-after ease-in-out infinite;
}

@keyframes h2-after {
	0%, 100% {
		transform: translate3d(0px, 12px, -20px);
	}
	50% {
		transform: translate3d(0px, -6px, -20px);
	}
}

效果图：








            

            
posted @ 
2021-03-10 16:48 
༺Tu༒aimes༻ 
阅读(124) 
评论(0) 
 
收藏 
举报