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); } }
效果图: