正文
用原生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);
}
}
效果图：
