<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background-color: #111111; } .la { color: #FFFFFF; text-align: center; font-size: 50px; font-weight: bold; position:relative; top: 300px; left: 0; -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(170, 0, 0, 0.2));//设计文字倒影 } .la span { position: relative; display: inline-block; color: #FFFFFF; /* font-size: 2rem; */ text-transform: uppercase; animation: anima 1s ease-in-out infinite; animation-delay: calc(0.1s* var(--i) ); } @keyframes anima{ 0% { transform: translateY(0px); } 20% { transform: translateY(-10px); } 40%,100% { transform: translateY(0px); } } </style> </head> <body> <div class="la"> <span style="--i:1">L</span> <span style="--i:2">O</span> <span style="--i:3">A</span> <span style="--i:4">D</span> <span style="--i:5">I</span> <span style="--i:6">N</span> <span style="--i:7">G</span> <span style="--i:8">.</span> <span style="--i:9">.</span> <span style="--i:10">.</span> </div> </body> </html>
原文：https://www.cnblogs.com/nightwerelonger/p/14744077.html