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